/* ========================================================================== Keys & Curb Co. Bottle green and warm bone, with brass as the accent. The monochrome logo takes the colour of whatever ground it sits on, so it never fights the palette. Didone is confined to the lockup — everything you read is set in a sans. ========================================================================== */ :root { --paper: #F4F1E8; --paper-2: #EAE6D9; --surface: #FCFAF4; --ink: #0C2A20; --ink-2: #123626; --ink-soft: #4A6355; --ink-faint: #7E9184; --on-ink: #F4F1E8; --on-ink-s: #9DB4A5; --rule: #D6D0BF; --rule-soft: #E6E1D3; --rule-dark: #224635; --brass: #9C6C22; --brass-bright:#C68F3E; --brass-glow: #E0B061; --shadow-sm: 0 1px 2px rgba(12,42,32,.05); --shadow: 0 2px 4px rgba(12,42,32,.04), 0 16px 44px rgba(12,42,32,.08); --wide: 78rem; --mid: 58rem; --narrow: 42rem; --ease: cubic-bezier(.2,.7,.2,1); /* the mark, inlined so it works from file:// and caches with the stylesheet */ --kc-logo: url("data:image/svg+xml,%20%20%20%20%20%20%20%20"); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #081712; --paper-2: #0E241B; --surface: #0C1F18; --ink: #EDEADF; --ink-2: #DCD8CA; --ink-soft: #A2B8AA; --ink-faint: #74897C; --on-ink: #081712; --on-ink-s: #466554; --rule: #1E3A2C; --rule-soft: #162C21; --rule-dark: #D6D0BF; --brass: #D9A257; --brass-bright:#E8B96F; --brass-glow: #F2CE8E; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 2px 4px rgba(0,0,0,.3), 0 16px 44px rgba(0,0,0,.45); } } :root[data-theme="dark"] { --paper: #081712; --paper-2: #0E241B; --surface: #0C1F18; --ink: #EDEADF; --ink-2: #DCD8CA; --ink-soft: #A2B8AA; --ink-faint: #74897C; --on-ink: #081712; --on-ink-s: #466554; --rule: #1E3A2C; --rule-soft: #162C21; --rule-dark: #D6D0BF; --brass: #D9A257; --brass-bright:#E8B96F; --brass-glow: #F2CE8E; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 2px 4px rgba(0,0,0,.3), 0 16px 44px rgba(0,0,0,.45); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 17.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { max-width: 100%; height: auto; display: block; } /* ---------- type ---------- */ h1, h2, h3 { font-family: "Bricolage Grotesque", "Instrument Sans", sans-serif; font-weight: 700; letter-spacing: -.028em; line-height: 1.05; text-wrap: balance; margin: 0; } h1 { font-size: clamp(2.7rem, 7vw, 5.4rem); font-weight: 800; letter-spacing: -.035em; } h2 { font-size: clamp(1.95rem, 4.6vw, 3.4rem); font-weight: 700; } h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.14; } h4 { font-family: "Instrument Sans", sans-serif; font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; margin: 0; } p { margin: 0 0 1.15rem; } p:last-child { margin-bottom: 0; } .lede { font-size: clamp(1.08rem, 1.7vw, 1.28rem); line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; } a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .label { font-family: "Instrument Sans", sans-serif; font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; } .serif { font-family: "Bodoni Moda", Didot, serif; } /* lockup only */ .italic { font-style: italic; } /* ---------- the lockup ---------- */ /* The real mark, traced to vector. Painted as a CSS mask rather than an so it inherits the surrounding text colour — one file serves the bone header and the green footer, and both themes, with no second export. Set font-size on .kc; the mark is sized in em and follows. */ .kc { display: inline-block; line-height: 0; text-decoration: none; color: inherit; font-size: 1rem; /* override per use */ } .kc-mark { display: block; height: 2.05em; aspect-ratio: 1342 / 592; background-color: currentColor; -webkit-mask: var(--kc-logo) no-repeat center / contain; mask: var(--kc-logo) no-repeat center / contain; } /* Very old browsers with no mask support get the wordmark as text rather than a solid rectangle. */ @supports not ((-webkit-mask-image: url("#")) or (mask-image: url("#"))) { .kc-mark { background: none; height: auto; aspect-ratio: auto; font-family: Didot, "Bodoni MT", "Times New Roman", serif; font-weight: 700; font-size: .95em; line-height: 1.1; letter-spacing: -.02em; } .kc-mark::before { content: "KEYS & CURB Co."; } } /* ---------- kerb stripe ---------- */ .kerb { height: 7px; width: 100%; background: repeating-linear-gradient(90deg, var(--brass) 0 32px, transparent 32px 64px); opacity: .55; } /* ---------- layout ---------- */ .wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 1.6rem; } .wrap-mid{ width: 100%; max-width: var(--mid); margin-inline: auto; padding-inline: 1.6rem; } .wrap-nr { width: 100%; max-width: var(--narrow); margin-inline: auto; padding-inline: 1.6rem; } section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; } section.tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .mx-auto { margin-inline: auto; } .center { text-align: center; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--rule-soft); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.6rem; } .header-inner .kc { font-size: 1rem; } .nav { display: flex; align-items: center; gap: 1.8rem; } .nav > a:not(.btn) { font-size: .82rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); position: relative; padding-block: .25rem; } .nav > a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--ink); transition: width .3s var(--ease); } .nav > a:not(.btn):hover { color: var(--ink); } .nav > a:not(.btn):hover::after { width: 100%; } @media (prefers-reduced-motion: reduce) { .nav > a::after { transition: none; } } @media (max-width: 58rem) { .nav .nav-hide-sm { display: none; } } @media (max-width: 36rem) { .nav { gap: 1.1rem; } .nav .nav-hide-xs { display: none; } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .85rem 1.5rem; font-family: "Instrument Sans", sans-serif; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .22s, color .22s, border-color .22s, transform .16s var(--ease); } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-solid { background: var(--ink); color: var(--on-ink); } .btn-solid:hover { background: var(--ink-2); } .btn-line { border-color: var(--ink); color: var(--ink); } .btn-line:hover { background: var(--ink); color: var(--on-ink); } .btn-invert { background: var(--on-ink); color: var(--ink); } .btn-invert:hover { background: var(--paper-2); } .btn-brass { background: var(--brass-bright); color: #17120A; } .btn-brass:hover { background: var(--brass-glow); box-shadow: 0 8px 28px color-mix(in srgb, var(--brass) 40%, transparent); } .btn-line-invert { border-color: color-mix(in srgb, var(--on-ink) 45%, transparent); color: var(--on-ink); } .btn-line-invert:hover { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); } /* ---------- hero ---------- */ .hero { padding-block: clamp(4rem, 11vw, 9rem) clamp(3rem, 7vw, 5.5rem); position: relative; overflow: hidden; isolation: isolate; } .hero h1 { max-width: 19ch; } .hero .lede { max-width: 46ch; margin-top: 2rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.6rem; } .hero-rule { margin-top: 4rem; padding-top: 2.2rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 3rem; } .hero-rule > div { min-width: 8.5rem; } .hero-rule .label { color: var(--ink-faint); display: block; margin-bottom: .55rem; } .hero-rule strong { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); } /* oversized outlined watermark */ .watermark { position: absolute; right: -1.5vw; bottom: -6vw; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 30vw; line-height: .72; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--brass) 38%, transparent); opacity: .85; z-index: -1; pointer-events: none; user-select: none; } /* ---------- rule band (the "creative thinking / measurable results" strip) ---------- */ .strip { background: var(--ink); color: var(--on-ink); padding-block: 1.15rem; text-align: center; } .strip .label { letter-spacing: .3em; font-size: .68rem; } .strip .label b { font-weight: 700; } /* ---------- section heading ---------- */ .sec-head { margin-bottom: 3.2rem; max-width: 46rem; } .sec-head .label { color: var(--brass); display: block; margin-bottom: 1.3rem; } .sec-head h2 + p { margin-top: 1.4rem; } /* ---------- marquee ---------- */ .marquee { background: var(--brass-bright); color: #17120A; overflow: hidden; padding-block: .8rem; border-block: 1px solid color-mix(in srgb, #17120A 18%, transparent); } .marquee-track { display: flex; width: max-content; animation: slide 42s linear infinite; } .marquee span { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: .92rem; letter-spacing: -.005em; text-transform: uppercase; padding-inline: 1.5rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 1.5rem; } .marquee span::after { content: "◆"; font-size: .48rem; opacity: .55; } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* The strip is a deliberate exception to prefers-reduced-motion: it scrolls for everyone, including visitors whose device asks for reduced motion. That is a considered choice, not an oversight — every OTHER animation on the site still honours the setting (scroll behaviour, reveals, hero rise, hover transitions). Because this one opts out, it must offer a way to stop it: it pauses on hover, on keyboard focus, and while touched. WCAG 2.2.2 asks for exactly that from anything that moves for more than five seconds. If you ever want it to honour the setting again, wrap the animation line in @media (prefers-reduced-motion: no-preference). */ .marquee:hover .marquee-track, .marquee:focus-within .marquee-track, .marquee:active .marquee-track { animation-play-state: paused; } /* ---------- cards ---------- */ .grid { display: grid; gap: 1.15rem; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(19.5rem, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .card { background: var(--surface); border: 1px solid var(--rule); border-radius: 5px; padding: 1.8rem 1.6rem 1.5rem; display: flex; flex-direction: column; gap: .7rem; text-decoration: none; color: inherit; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); } .card::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 0; background: var(--brass-bright); transition: height .32s var(--ease); } a.card:hover { border-color: color-mix(in srgb, var(--brass) 55%, var(--rule)); transform: translateY(-3px); box-shadow: var(--shadow); } a.card:hover::before { height: 100%; } @media (prefers-reduced-motion: reduce) { .card, .card::before { transition: none; } a.card:hover { transform: none; } } .card .label { color: var(--brass); } .card h3 { margin-bottom: .1rem; } .card p { color: var(--ink-soft); font-size: .95rem; margin: 0; } .card .more { margin-top: auto; padding-top: 1rem; font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); text-decoration: none; } /* ---------- audit panel ---------- */ /* Deliberately not a card: inverted, full width, its own button. It sits below the service grid and must not read as a seventh service. */ .audit { margin-top: 1.15rem; background: var(--ink); color: var(--on-ink); border-radius: 5px; padding: 2.2rem 2.2rem; display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; position: relative; overflow: hidden; } /* brass kerb stripe along the top edge, tying it to the section rules */ .audit::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px; background: repeating-linear-gradient(90deg, var(--brass-bright) 0 26px, transparent 26px 52px); opacity: .8; } .audit-copy { flex: 1 1 26rem; } .audit .label { color: var(--brass-glow); display: block; margin-bottom: .8rem; } .audit h3 { color: var(--on-ink); font-size: clamp(1.4rem, 2.6vw, 1.95rem); margin-bottom: .7rem; } .audit p { color: var(--on-ink-s); font-size: .97rem; margin: 0; max-width: 52ch; } .audit-action { flex: 0 0 auto; } @media (max-width: 40rem) { .audit { padding: 1.8rem 1.5rem; gap: 1.6rem; } .audit-action .btn { width: 100%; } } /* ---------- case cards ---------- */ .cases { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .case { background: var(--surface); border: 1px solid var(--rule); border-radius: 5px; padding: 1.9rem 1.6rem; display: flex; flex-direction: column; gap: .65rem; box-shadow: var(--shadow-sm); } .case .stat { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(2.4rem, 5.5vw, 3.4rem); font-weight: 800; letter-spacing: -.045em; line-height: .9; color: var(--brass); font-variant-numeric: tabular-nums; margin-bottom: .3rem; } .case .what { font-weight: 600; font-size: 1rem; } .case p { color: var(--ink-soft); font-size: .93rem; margin: 0; } /* ---------- service list (editorial rows, kept for inner pages) ---------- */ .svc-list { border-top: 1px solid var(--rule); } .svc { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 2rem; align-items: baseline; padding: 2.1rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; position: relative; transition: padding-left .3s var(--ease); } .svc::before { content: ""; position: absolute; inset: 0 -1.5rem; background: var(--paper-2); opacity: 0; z-index: -1; transition: opacity .3s var(--ease); } .svc:hover { padding-left: .8rem; } .svc:hover::before { opacity: 1; } @media (prefers-reduced-motion: reduce) { .svc, .svc::before { transition: none; } .svc:hover { padding-left: 0; } } .svc-num { font-family: "Instrument Sans", sans-serif; font-size: .68rem; font-weight: 600; letter-spacing: .2em; color: var(--brass); font-variant-numeric: tabular-nums; } .svc-body h3 { margin-bottom: .55rem; } .svc-body p { color: var(--ink-soft); font-size: .96rem; margin: 0; max-width: 54ch; } .svc-go { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; } .svc:hover .svc-go { color: var(--brass); } @media (max-width: 44rem) { .svc { grid-template-columns: 3rem 1fr; gap: 1.2rem; } .svc-go { grid-column: 2; margin-top: .6rem; } } /* ---------- stats ---------- */ .stats { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); border-top: 1px solid var(--rule); } .stat-cell { padding: 2.4rem 2rem 2.4rem 0; border-bottom: 1px solid var(--rule); } .stat-cell .n { color: var(--brass); font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(2.8rem, 6vw, 4.2rem); font-weight: 800; letter-spacing: -.04em; line-height: .9; display: block; margin-bottom: .9rem; font-variant-numeric: tabular-nums; } .stat-cell .what { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: .8rem; } .stat-cell p { color: var(--ink-soft); font-size: .94rem; margin: 0; max-width: 34ch; } /* placeholder marker — deliberately visible */ .fill { background: repeating-linear-gradient(-45deg, var(--rule) 0 2px, transparent 2px 6px); outline: 1px dashed var(--ink-faint); outline-offset: 2px; padding: 0 .25em; color: var(--ink); } /* ---------- steps ---------- */ .steps { counter-reset: step; } .step { counter-increment: step; display: grid; grid-template-columns: 4.5rem 1fr; gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--rule); } .step:last-child { border-bottom: 1px solid var(--rule); } .step::before { content: counter(step, decimal-leading-zero); font-family: "Bricolage Grotesque", sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; color: var(--brass); font-variant-numeric: tabular-nums; } .step h3 { margin-bottom: .55rem; } .step p { color: var(--ink-soft); margin: 0; max-width: 54ch; } @media (max-width: 36rem) { .step { grid-template-columns: 1fr; gap: .5rem; } } /* ---------- inverted band ---------- */ .band { background: var(--ink); color: var(--on-ink); } .band h2, .band h3 { color: var(--on-ink); } .band .lede, .band p { color: var(--on-ink-s); } .band .label { color: var(--brass-glow); } .band .step { border-color: var(--rule-dark); } .band .step:last-child { border-bottom-color: var(--rule-dark); } .band .step::before { color: var(--brass-glow); } .band .fill { background: repeating-linear-gradient(-45deg, var(--rule-dark) 0 2px, transparent 2px 6px); outline-color: var(--on-ink-s); color: var(--on-ink); } /* ---------- prose ---------- */ .prose { max-width: var(--narrow); } .prose h2 { margin-top: 3.2rem; margin-bottom: 1.1rem; font-size: clamp(1.6rem, 3.2vw, 2.2rem); } .prose h2:first-child { margin-top: 0; } .prose h3 { margin-top: 2.2rem; margin-bottom: .65rem; } .prose ul, .prose ol { margin: 0 0 1.15rem; padding-left: 1.35rem; color: var(--ink-soft); } .prose li { margin-bottom: .55rem; } .prose p { color: var(--ink-soft); } .prose strong { color: var(--ink); font-weight: 600; } /* ---------- ticks ---------- */ .ticks { list-style: none; padding: 0; margin: 0 0 1.2rem; } .ticks li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 1rem; align-items: start; color: var(--ink-soft); font-size: .97rem; padding: .75rem 0; border-bottom: 1px solid var(--rule-soft); } .ticks li:first-child { border-top: 1px solid var(--rule-soft); } .ticks li::before { content: "—"; color: var(--brass); font-size: .85rem; line-height: 1.7; } .ticks strong { color: var(--ink); font-weight: 600; } .band .ticks li { border-color: var(--rule-dark); color: var(--on-ink-s); } .band .ticks li:first-child { border-top-color: var(--rule-dark); } .band .ticks strong { color: var(--on-ink); } .band .ticks li::before { color: var(--brass-glow); } /* ---------- note ---------- */ .note-box { border: 1px solid var(--rule); border-left: 3px solid var(--brass); background: var(--surface); padding: 1.2rem 1.4rem; font-size: .93rem; color: var(--ink-soft); } .note-box strong { color: var(--ink); } /* ---------- form ---------- */ .form { display: flex; flex-direction: column; gap: 1.2rem; max-width: 34rem; } .field { display: flex; flex-direction: column; gap: .45rem; } .field label { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); } .field input, .field textarea, .field select { font-family: inherit; font-size: 1rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: .6rem 0; width: 100%; border-radius: 0; } .field textarea { min-height: 7rem; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--ink); outline: none; } .field select { cursor: pointer; } /* ---------- form status ---------- */ .form-status { font-size: .93rem; padding: .85rem 1.05rem; border-left: 3px solid var(--rule); background: var(--surface); margin-top: .4rem; } .form-status:empty { display: none; } .form-status.pending { border-left-color: var(--ink-faint); color: var(--ink-soft); } .form-status.ok { border-left-color: var(--brass); color: var(--ink); font-weight: 600; } .form-status.err { border-left-color: #A0392C; color: #A0392C; } :root[data-theme="dark"] .form-status.err { color: #E28B7A; border-left-color: #E28B7A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form-status.err { color: #E28B7A; border-left-color: #E28B7A; } } /* ---------- contact rows ---------- */ .contact-rows { border-top: 1px solid var(--rule); } .contact-row { display: grid; grid-template-columns: 8rem 1fr; gap: 1.2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); font-size: .97rem; } .contact-row dt { font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); padding-top: .35rem; } .contact-row dd { margin: 0; } @media (max-width: 36rem) { .contact-row { grid-template-columns: 1fr; gap: .25rem; } } /* ---------- chips ---------- */ .chips { display: flex; flex-wrap: wrap; gap: .5rem .55rem; } .chip { font-size: .8rem; letter-spacing: .04em; padding: .4rem .85rem; border: 1px solid var(--rule); color: var(--ink-soft); text-decoration: none; transition: border-color .2s, color .2s; } a.chip:hover { border-color: var(--ink); color: var(--ink); } @media (prefers-reduced-motion: reduce) { .chip { transition: none; } } /* ---------- footer ---------- */ .site-footer { background: var(--ink); color: var(--on-ink-s); padding-block: 4.5rem 2.5rem; font-size: .92rem; } .site-footer .kc { font-size: 1.6rem; color: var(--on-ink); } .footer-grid { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); padding-bottom: 3rem; border-bottom: 1px solid var(--rule-dark); } .footer-grid h4 { color: var(--on-ink); margin-bottom: 1.2rem; } .footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; } .footer-grid a { text-decoration: none; color: var(--on-ink-s); transition: color .2s; } .footer-grid a:hover { color: var(--on-ink); } .footer-bottom { padding-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .8rem; letter-spacing: .06em; } .site-footer .fill { background: repeating-linear-gradient(-45deg, var(--rule-dark) 0 2px, transparent 2px 6px); outline-color: var(--on-ink-s); color: var(--on-ink); } /* ---------- reveal ---------- */ .reveal { opacity: 0; transform: translateY(20px); } .reveal.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.in { opacity: 1; transform: none; transition: none; } } .no-js .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { .rise { animation: rise .9s var(--ease) both; } .rise-1 { animation-delay: .05s; } .rise-2 { animation-delay: .17s; } .rise-3 { animation-delay: .29s; } .rise-4 { animation-delay: .41s; } @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } } /* ---------- misc ---------- */ .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--on-ink); padding: .7rem 1.2rem; z-index: 100; font-weight: 600; } .skip:focus { left: 0; } hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }