/* ============================================================ Carisma Church — clean, high-end white edition White · warm ink · single terracotta accent · elegant serif. Signature: the logo's arch, drawn large and traced by soft light. Montserrat throughout: ExtraBold for display, Regular for reading. ============================================================ */ :root { --white: #fbfaf8; /* near-white base (a hair warm, not sterile) */ --paper: #ffffff; /* raised surfaces */ --ink: #201d18; /* warm near-black text */ /* These four are set to clear WCAG 1.4.3 AA (4.5:1) on all three surfaces the site uses: white, the near-white page, and the warm panel. The previous values sat just under it, so the main call to action on every page ("Plan your first visit") read at 3.77:1 and every accent line at 3.84:1. Measured, not eyeballed: darkening the terracotta by about 12 per cent carries the whole palette over the line and keeps the colour recognisably the same. Do not lighten any of them back without re-measuring. */ --muted: #6f675c; /* warm grey */ --caramel: #a8512d; /* terracotta — the single accent */ --caramel-d:#8f4222; /* deeper, for hover */ --line: rgba(32,29,24,0.12); --line-2: rgba(32,29,24,0.07); --ease: cubic-bezier(0.16, 1, 0.3, 1); --pad: clamp(1.5rem, 6vw, 7rem); /* ---- Display type ------------------------------------------------------- The headings are set in the logo's own face, Montserrat ExtraBold, so the page reads as coming from the same place as the mark. Everything routes through these three tokens: to go back to the editorial serif, set --font-display to "Fraunces", --display-weight to 300 and --display-tracking to -0.02em, and re-add Fraunces to the font link. */ --font-display: "Montserrat", system-ui, sans-serif; --display-weight: 800; --display-tracking: -0.028em; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; } body { margin: 0; background: var(--white); color: var(--ink); font-family: "Montserrat", system-ui, sans-serif; font-weight: 400; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } a { color: inherit; text-decoration: none; } [hidden] { display: none !important; } /* Emphasis is carried by colour, not a slant: Montserrat has no true italic design and a synthesised one next to ExtraBold reads as a mistake. */ em { font-style: normal; color: var(--caramel); } h1 em, h2 em, h3 em, .hero__title em { font-weight: inherit; } /* whisper-soft warm light on the white — keeps it from feeling clinical */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(80% 55% at 50% -6%, rgba(226,180,140,0.14), transparent 60%), radial-gradient(60% 50% at 85% 12%, rgba(214,196,178,0.10), transparent 65%); } main { position: relative; z-index: 1; } /* barely-there paper grain */ .grain { position: fixed; inset: -50%; z-index: 3; pointer-events: none; opacity: 0.022; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } /* ---- Logo mark ---- */ /* ---- Preloader ---- */ .preloader { position: fixed; inset: 0; z-index: 9999; background: var(--white); display: grid; place-items: center; gap: 1.4rem; grid-auto-flow: row; } .preloader__mark { width: clamp(76px, 10.3vw, 118px); height: clamp(66px, 9vw, 104px); color: var(--ink); overflow: visible; } .preloader__ghost { opacity: .12; } /* the shape reads before it fills */ .preloader__count { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; color: var(--muted); letter-spacing: 0.1em; } .preloader__count span::after { content: "%"; opacity: 0.5; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.95em 1.7em; background: var(--caramel); color: #fff7ec; border-radius: 100px; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; transition: transform .5s var(--ease), background .3s, box-shadow .5s var(--ease); box-shadow: 0 12px 26px -14px rgba(150,66,40,0.5); will-change: transform; cursor: pointer; } .btn:hover { transform: translateY(-2px); background: #a8512d; box-shadow: 0 16px 34px -14px rgba(150,66,40,0.55); } .btn--ghost { background: transparent; color: var(--ink); box-shadow: none; border: 1px solid var(--line); } .btn--ghost:hover { background: rgba(32,29,24,0.04); box-shadow: none; } .btn--sm { padding: 0.7em 1.25em; font-size: 0.85rem; } /* ---- Type system ---- */ .eyebrow, .idx { font-family: "Montserrat"; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); } .idx { color: var(--caramel); display: block; margin-bottom: 1.4rem; } .hero__title, h2 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.02; } .hero__title { margin: 0.3em auto 0.55rem; font-size: clamp(2.05rem, 5.7vw, 4.3rem); line-height: 1.04; letter-spacing: -0.032em; } .hero__title .line { display: block; overflow: hidden; } .hero__title .line > span { display: block; white-space: nowrap; } /* keep "Carisma Church" on one line */ .hero__title .line--lead { font-size: max(0.19em, 0.72rem); margin-bottom: 0.7em; } .hero__title .line--lead > span { font-style: normal; font-weight: 600; color: var(--caramel); letter-spacing: .06em; text-transform: uppercase; } h2 { font-size: clamp(1.7rem, 3.9vw, 3.15rem); margin: 0 0 1.4rem; max-width: 18ch; } .statement { max-width: 20ch; font-weight: 300; } h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; margin: 0 0 .5rem; letter-spacing: -0.012em; } p { color: var(--muted); font-size: clamp(1rem, 1.15vw, 1.18rem); max-width: 46ch; } b { color: var(--ink); font-weight: 600; } /* ---- Nav ---- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: 2rem; padding: 1.1rem var(--pad); transition: background .4s, backdrop-filter .4s, padding .4s, border-color .4s; border-bottom: 1px solid transparent; } .nav.is-stuck { background: rgba(251,250,248,0.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding-top: .8rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line-2); } .nav__brand { display: flex; align-items: center; gap: 0.6rem; } .nav__mark { width: 34px; height: 30px; color: var(--ink); } /* The wordmark, exactly as the church's logo sets it: CARISMA in Montserrat ExtraBold, CHURCH in Regular with wider tracking. Kept as real text rather than an image so it stays crisp at any size and can be read by anything. */ .nav__word { font-family: "Montserrat"; font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .005em; white-space: nowrap; } .nav__word span { font-weight: 400; letter-spacing: .045em; margin-left: .18em; } .nav__links { margin-left: auto; display: flex; gap: 1.35rem; font-size: 0.92rem; color: var(--muted); } .nav__links a { position: relative; transition: color .3s; } .nav__links a:hover { color: var(--ink); } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--caramel); transition: width .4s var(--ease); } .nav__links a:hover::after { width: 100%; } /* Staff sign in: a quiet outlined pill at the end of the header links (same as app.css). */ .nav-staff { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .85rem; margin-left: .2rem; border: 1px solid rgba(32,29,24,.2); border-radius: 100px; font-size: .8rem; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .3s, border-color .3s; } .nav__links a.nav-staff::after { display: none; } .nav-staff:hover, .nav-staff:focus-visible { color: var(--ink); border-color: var(--ink); } .nav-staff svg { flex: none; } /* Between the phone menu and a wide screen the header is tight, so the pill shows only its icon; the words stay in the page for screen readers. */ @media (min-width: 901px) and (max-width: 1240px) { .nav-staff { padding: .5rem; } .nav-staff span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* Seven links plus the staff icon are tight between 901 and ~1140px, so the links close up a little there to keep the header on one line. */ @media (min-width: 901px) and (max-width: 1140px) { .nav { gap: 1.25rem; } .nav__links { gap: .85rem; font-size: .85rem; } } .nav__links { align-items: center; } .nav__menu-cta, .nav__menu-signin { display: none; } /* only shown inside the mobile menu */ /* Hamburger toggle (mobile only) */ .nav__toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 6px; z-index: 60; } .nav__toggle span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease), opacity .3s; } .nav.open .nav__toggle span:first-child { transform: translateY(4px) rotate(45deg); } .nav.open .nav__toggle span:last-child { transform: translateY(-4px) rotate(-45deg); } /* ---- Hero ---- */ .hero { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 8rem var(--pad) 4rem; position: relative; overflow: hidden; } .hero > *:not(.hero__scene):not(.scrollcue) { position: relative; z-index: 1; } /* signature scene: cross + arch, large behind the title (text sits overtop) */ .hero__scene { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .hero__scene svg { width: min(86vw, 780px); height: auto; overflow: visible; } /* The monogram sits behind the words at a whisper, so it reads as watermark rather than decoration competing with the headline. */ .scene-mark { color: rgba(32,29,24,0.055); } @keyframes arch-trace { from { stroke-dashoffset: 1040; } to { stroke-dashoffset: 0; } } .hero__sub { font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: var(--ink); opacity: .8; max-width: 36ch; margin: 0 auto 2rem; } .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-bottom: 2.2rem; } .hero__actions .btn { padding: 0.55em 1.15em; font-size: 0.82rem; } /* reduced hero buttons */ .hero__meta { display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap; font-size: 0.92rem; color: var(--muted); } .hero__meta .dot { opacity: .5; } .scrollcue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .6rem; color: var(--muted); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; z-index: 1; } .scrollcue i { width: 1px; height: 42px; background: linear-gradient(var(--caramel), transparent); animation: cue 2.4s var(--ease) infinite; transform-origin: top; } /* The scroll cue is absolutely placed inside the hero's bottom padding, which was 4rem while the cue stands about 6.5rem tall. Once the "What's on" list joined the hero, the content reached into that space on any laptop screen shorter than about 860px, and "Scroll" was drawn over "Full calendar" (found 2026-09-23). Wherever the cue shows, the padding now holds all of it. */ @media (min-width: 901px) and (prefers-reduced-motion: no-preference) { .hero { padding-bottom: 7.5rem; } } @keyframes cue { 0%{ transform: scaleY(0); } 40%{ transform: scaleY(1);} 100%{ transform: scaleY(0); transform-origin: bottom; } } /* ---- Section rhythm ---- */ .act { padding: clamp(6rem, 14vh, 12rem) var(--pad); position: relative; } .heart__body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; margin-top: 1rem; } .pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; } .pills li { border: 1px solid var(--line); border-radius: 100px; padding: .5em 1em; font-size: .82rem; color: var(--ink); background: var(--paper); } /* ---- Photos ---- */ .photo-band { position: relative; border-radius: 22px; overflow: hidden; margin: 2.5rem 0 0; aspect-ratio: 16/8; box-shadow: 0 34px 70px -34px rgba(60,45,25,.45); } .photo-band img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; } .photo-band__cap { position: absolute; inset: auto 0 0 0; padding: 2.4rem clamp(1.3rem,4vw,2.6rem) 1.8rem; color: #fff; background: linear-gradient(to top, rgba(28,20,12,.82), rgba(28,20,12,.15) 55%, transparent); } .photo-band__cap .eyebrow { color: #f2dcb6; } .photo-band__cap p { color: #fff; opacity: .96; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 2.1vw, 1.65rem); line-height: 1.15; letter-spacing: -0.01em; max-width: 22ch; margin: .4rem 0 0; } .photo-band__cap em { color: #f2c893; } .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.6rem; } .gallery figure { position: relative; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 22px 48px -30px rgba(60,45,25,.45); } .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .gallery figure:hover img { transform: scale(1.06); } /* Real photos since 2026-10-12, in landscape tiles so the group photo keeps everyone in it. The portrait one is framed on the face. */ .gallery img.gallery__portrait { object-position: 50% 22%; } .gallery figcaption { position: absolute; inset: auto 0 0 0; padding: 1.6rem 1rem .9rem; color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .02em; background: linear-gradient(to top, rgba(28,20,12,.72), transparent); } @media (max-width: 640px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery figure:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; } .photo-band { aspect-ratio: 5/6; } .photo-band__cap p { font-size: 1.3rem; } .visit__photo { aspect-ratio: 4/3; } } .visit__photo { border-radius: 22px; overflow: hidden; margin-bottom: 3rem; aspect-ratio: 16/6; position: relative; box-shadow: 0 34px 70px -34px rgba(60,45,25,.45); } .visit__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; } .visit__photo figcaption { position: absolute; inset: auto auto 1.2rem 1.4rem; color: #fff; font-family: var(--font-display); font-size: 1.05rem; text-shadow: 0 2px 12px rgba(0,0,0,.6); } /* Sundays cards */ .cards, .ministries { display: grid; gap: 1.2rem; margin-top: 2.5rem; } .cards { grid-template-columns: repeat(3, 1fr); } .card { background: var(--paper); border: 1px solid var(--line-2); border-radius: 18px; padding: 2rem 1.8rem; box-shadow: 0 20px 45px -30px rgba(60,45,25,0.35); transition: transform .6s var(--ease), border-color .4s, box-shadow .5s var(--ease); } .card:hover { transform: translateY(-4px); border-color: rgba(168,81,45,0.45); box-shadow: 0 28px 55px -30px rgba(60,45,25,0.4); } .card__k { font-family: var(--font-display); font-weight: 700; color: var(--caramel); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; } .card h3 { margin-top: .8rem; } .card p { font-size: .98rem; } /* Ministries */ .ministries { grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); } .min { position: relative; display: grid; grid-template-columns: 1.4rem 1fr; align-content: start; column-gap: 1.4rem; padding: 2.2rem 1.5rem; border-bottom: 1px solid var(--line); transition: background .4s; overflow: hidden; } .min:nth-child(odd) { border-right: 1px solid var(--line); } .min__n { font-family: var(--font-display); font-weight: 700; color: var(--muted); font-size: .82rem; grid-row: span 2; } .min h3 { margin: 0; transition: transform .5s var(--ease); } .min p { margin: .3rem 0 0; font-size: .95rem; } .min__go { position: absolute; top: 2.2rem; right: 1.5rem; font-style: normal; color: var(--caramel); opacity: 0; transform: translate(-6px,6px); transition: all .5s var(--ease); } .min:hover { background: linear-gradient(180deg, rgba(168,81,45,0.05), transparent); } .belong__all { margin: .8rem 0 0; font-weight: 600; font-size: .95rem; } /* 44px tall so it is a comfortable tap on a phone; the underline stays on the text. */ .belong__all a { display: inline-block; padding: 11px 0; color: var(--caramel); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; transition: color .3s; } .belong__all a::after { content: " \2192"; } .belong__all a:hover { color: var(--caramel-d); } .min:hover h3 { transform: translateX(6px); } .min:hover .min__go { opacity: 1; transform: translate(0,0); } /* Give */ .give { text-align: left; } .give__p { margin: 0 0 2rem; } .give__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; } /* ---- Visit / footer ---- */ .visit { padding: clamp(5rem, 12vh, 10rem) var(--pad) 2.5rem; border-top: 1px solid var(--line); position: relative; background: linear-gradient(180deg, transparent, rgba(168,81,45,0.045)); } .visit__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; } .visit__mark { width: 62px; height: 54px; color: var(--caramel); margin-bottom: 1.5rem; } .visit__lead h2 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); } .visit__lead .btn { margin-top: 1.6rem; } .visit__info { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 2.5rem; align-self: center; } .visit__info dt { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; } .visit__info dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.4; color: var(--ink); } .visit__info a:hover { color: var(--caramel); } /* The pastor's email address is one unbreakable 27-character word, and between 901 and ~1100px it pushed the homepage 42px wider than the screen (a sideways scroll). Let it break onto a second line instead. */ .visit__info a[href^="mailto:"] { overflow-wrap: anywhere; } .visit__social { grid-column: 1 / -1; } .visit__social dd { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; font-family: "Montserrat"; font-size: .95rem; } .visit__social a { color: var(--muted); transition: color .3s; } .visit__social a:hover { color: var(--caramel); } .visit__base { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); } .visit__legal { display: flex; gap: 1.2rem; flex-wrap: wrap; } .visit__base a { transition: color .3s; } .visit__base a:hover { color: var(--caramel); } /* ---- Reveal states ---- */ .reveal, .reveal-now { will-change: transform, opacity; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .nav__toggle { display: flex; } .nav__signin { display: none; } /* hide the bar sign-in; it lives in the menu on mobile */ /* full-screen overlay menu */ .nav__links { position: fixed; inset: 0; margin: 0; flex-direction: column; justify-content: center; align-items: center; gap: 1.7rem; font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); background: rgba(251,250,248,0.98); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; z-index: 40; } .nav.open .nav__links { opacity: 1; visibility: visible; transform: translateY(0); } .nav__links a { color: var(--ink); } .nav__links a::after { display: none; } .nav__menu-signin { display: inline-flex; font-family: "Montserrat"; } .nav__menu-cta { display: inline-flex; margin-top: 0.6rem; font-family: "Montserrat"; } .nav__links .nav-staff { font-family: "Montserrat"; font-size: .95rem; padding: .7rem 1.2rem; margin: .4rem 0 0; color: var(--muted); } .scrollcue { display: none; } .heart__body { grid-template-columns: 1fr; gap: 1.6rem; } .cards { grid-template-columns: 1fr; } .ministries { grid-template-columns: 1fr; } .min:nth-child(odd) { border-right: none; } .visit__grid { grid-template-columns: 1fr; gap: 2.5rem; } .visit__info { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 520px) { .visit__info { grid-template-columns: 1fr; } .hero__meta { font-size: .82rem; } } /* ============================================================ QUALITY FLOOR — reduced motion & no-JS ============================================================ */ @media (prefers-reduced-motion: reduce) { .grain, .scrollcue { display: none; } .arch--light { animation: none; opacity: 0; } .arch--base { stroke-dashoffset: 0; } } :focus-visible { outline: 2px solid var(--caramel); outline-offset: 3px; border-radius: 3px; } /* If JS never runs, skip the preloader and reveal all content. */ html:not(.js) .preloader { display: none; } html:not(.js) .scene-mark { opacity: 1; } /* Tap targets in the closing block. These links sit in lists and a footer bar, not in running prose, so the WCAG inline-link exemption does not apply: they were 20-23px tall and need to be comfortably tappable on a phone. */ .visit__social a { display: inline-block; padding-block: .35rem; } .visit__base a { display: inline-block; padding-block: .3rem; } .visit__lead dd a { display: inline-block; padding-block: .3rem; } .visit__info a { display: inline-block; padding-block: .3rem; } /* The route across to the Portuguese page, in the hero meta line. Underlined so it reads as a link rather than as part of the sentence. */ .hero__pt { color: var(--caramel); text-decoration: underline; text-underline-offset: 3px; } .hero__pt:hover { color: var(--caramel-d); } /* On a phone the closing block's text ran to the right screen edge while the left kept its gutter, so the page looked like it was falling off one side. Give it a symmetrical gutter of its own. */ @media (max-width: 760px) { .visit__lead, .visit__info { padding-right: 1.5rem; } } /* ---- What's on, in the hero ---------------------------------------------- Fed from the same calendar the church edits, so there is no second list to keep current. Deliberately quiet: it sits under the meta line and must not compete with the headline. */ .hero-up { margin-top: 2.2rem; display: flex; flex-direction: column; align-items: center; gap: .55rem; width: 100%; max-width: 520px; } .hero-up[hidden] { display: none; } .hero-up__label { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); } .hero-up__list { list-style: none; margin: 0; padding: 0; width: 100%; border-top: 1px solid var(--line); } .hero-up__list li { border-bottom: 1px solid var(--line); } /* text-align:left matters: the hero centres everything, and a centred middle column in a date/title/time row reads as a mistake. */ .hero-up__list a { display: grid; grid-template-columns: 5.6rem 1fr auto; align-items: baseline; gap: .8rem; padding: .62rem .2rem; font-size: .88rem; text-align: left; transition: background .2s; } .hero-up__list i { text-align: right; } .hero-up__list a:hover { background: rgba(32,29,24,.035); } .hero-up__list b { font-weight: 600; color: var(--ink); font-size: .8rem; } .hero-up__list span { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hero-up__list i { font-style: normal; color: var(--faint); font-size: .8rem; } .hero-up__all { font-size: .8rem; color: var(--caramel); font-weight: 600; padding-block: .35rem; } .hero-up__all:hover { text-decoration: underline; } @media (max-width: 560px) { /* On a phone the monogram scene lands behind the buttons and reads as a smudge; the nav mark and favicon carry the logo there. */ .hero__scene { display: none; } .hero-up { margin-top: 1.6rem; } /* The time drops below the title rather than squeezing it to nothing. */ .hero-up__list a { grid-template-columns: 4.6rem 1fr; gap: .6rem .7rem; } .hero-up__list i { grid-column: 2; } .hero-up__list span { white-space: normal; } }