/* ========================================================================= BILOOU — landing page Neo-brutalism: flat colour, thick ink borders, hard offset shadows, no gradients, no blur, no soft edges. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Tokens ------------------------------------------------------------------------- */ :root { --ink: #141210; --paper: #FFF8EC; --paper-2: #FFEFD6; --yellow: #FFE04B; --cyan: #6BE5E0; --pink: #FF6FB5; --lime: #C6FF5C; --orange: #FF8A3D; --purple: #B39BFF; --border-w: 3px; --border: var(--border-w) solid var(--ink); --radius: 0px; --sh-sm: 3px 3px 0 var(--ink); --sh: 6px 6px 0 var(--ink); --sh-lg: 10px 10px 0 var(--ink); --font-display: "Arial Black", "Archivo Black", "Helvetica Neue", Impact, system-ui, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace; --shell: 1200px; --gap: clamp(1rem, 2.5vw, 2rem); --section-y: clamp(4rem, 9vw, 7.5rem); --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ------------------------------------------------------------------------- 2. Reset & base ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; } body { background-color: var(--paper); background-image: linear-gradient(rgba(20, 18, 16, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 18, 16, 0.045) 1px, transparent 1px); background-size: 28px 28px; color: var(--ink); font-family: var(--font-body); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Clip sideways overflow from the decorative shapes. Deliberately NOT `overflow-x: hidden` on — that makes the body a scroll container and breaks the sticky header in Chrome. `clip` does the same job without one. */ html { overflow-x: clip; } @supports not (overflow: clip) { html { overflow-x: hidden; } } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input { font: inherit; color: inherit; } h1, h2, h3 { font-family: var(--font-display); font-weight: 900; line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase; } strong { font-weight: 800; } ::selection { background: var(--pink); color: var(--ink); } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } /* Utilities ---------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 999; padding: 0.75rem 1.25rem; background: var(--yellow); border: var(--border); box-shadow: var(--sh); font-weight: 800; transition: top 0.2s ease; } .skip-link:focus { top: 1rem; } .shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; } .shell--narrow { width: min(100% - 2.5rem, 780px); } /* ------------------------------------------------------------------------- 3. Buttons ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1.25rem; border: var(--border); box-shadow: var(--sh-sm); background: var(--paper); font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; transition: transform 0.14s var(--ease-pop), box-shadow 0.14s var(--ease-pop), background-color 0.14s ease; } .btn:hover, .btn:focus-visible { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); } .btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); } .btn--primary { background: var(--yellow); } .btn--outline { background: transparent; } .btn--ghost { background: transparent; border-color: transparent; box-shadow: none; } .btn--ghost:hover { background: var(--paper); border-color: var(--ink); box-shadow: var(--sh-sm); } .btn--dark { background: var(--ink); color: var(--paper); } .btn--lg { padding: 1rem 1.75rem; font-size: 0.9375rem; box-shadow: var(--sh); } .btn--lg:hover, .btn--lg:focus-visible { box-shadow: var(--sh-lg); } .btn__arrow { transition: transform 0.2s var(--ease-pop); } .btn:hover .btn__arrow { transform: translateX(4px); } /* ------------------------------------------------------------------------- 4. Header & navigation ------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: var(--border); transition: box-shadow 0.2s ease, transform 0.3s ease; } .site-header.is-stuck { box-shadow: 0 6px 0 var(--ink); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; } .logo { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.02em; } .logo__mark { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; background: var(--yellow); border: var(--border); box-shadow: var(--sh-sm); font-size: 1.1rem; line-height: 1; transition: transform 0.2s var(--ease-pop), background-color 0.2s ease; } .logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); background: var(--pink); } .logo--lg { font-size: 1.5rem; } .logo--lg .logo__mark { width: 2.6rem; height: 2.6rem; font-size: 1.35rem; } .site-nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); } .site-nav__list { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); list-style: none; padding: 0; } .site-nav__link { position: relative; padding: 0.35rem 0.15rem; font-weight: 700; font-size: 0.9375rem; } .site-nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform 0.22s var(--ease-pop); } .site-nav__link:hover::after, .site-nav__link:focus-visible::after { transform: scaleX(1); } .site-nav__actions { display: flex; align-items: center; gap: 0.6rem; } .nav-toggle { display: none; padding: 0.55rem; background: var(--yellow); border: var(--border); box-shadow: var(--sh-sm); cursor: pointer; } .nav-toggle__bars { display: grid; gap: 4px; width: 22px; } .nav-toggle__bars span { height: 3px; background: var(--ink); transition: transform 0.22s ease, opacity 0.15s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Messages carried across a redirect, shown under the header. */ .site-flash { padding-block: 0.85rem; background: var(--lime); border-bottom: var(--border); } .site-flash__item { font-weight: 800; font-size: 0.9375rem; } .site-flash__item + .site-flash__item { margin-top: 0.35rem; } /* ------------------------------------------------------------------------- 5. Hero ------------------------------------------------------------------------- */ .hero { position: relative; padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 6.5rem); overflow: hidden; } .hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem); } .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.9rem; background: var(--paper); border: var(--border); box-shadow: var(--sh-sm); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .eyebrow__dot { width: 9px; height: 9px; background: var(--pink); border: 2px solid var(--ink); border-radius: 50%; animation: pulse 1.8s ease-in-out infinite; } .hero__title { margin-top: 1.25rem; font-size: clamp(2.9rem, 7.5vw, 5.6rem); } .hl { position: relative; display: inline-block; padding: 0 0.25em; border: var(--border); box-shadow: var(--sh-sm); transform: rotate(-1.5deg); } .hl--yellow { background: var(--yellow); } .hl--cyan { background: var(--cyan); transform: rotate(1.5deg); } .hero__lede { max-width: 46ch; margin-top: 1.5rem; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); } .hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; } .hero__points { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.75rem; padding: 0; list-style: none; font-size: 0.875rem; font-weight: 700; } .hero__points li { display: flex; align-items: center; gap: 0.45rem; } .hero__points li::before { content: ""; width: 10px; height: 10px; background: var(--lime); border: 2px solid var(--ink); } /* Decorative shapes -------------------------------------------------------- */ /* Kept behind the copy so a floating shape never sits on top of a button. */ .hero__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero__inner { position: relative; z-index: 1; } .deco { position: absolute; border: var(--border); } .deco--star { top: 12%; right: 6%; width: 62px; height: 62px; background: var(--lime); animation: float 7s ease-in-out infinite; } .deco--ring { bottom: 14%; left: 4%; width: 78px; height: 78px; border-radius: 50%; background: transparent; border-width: 8px; animation: float 9s ease-in-out infinite reverse; } .deco--cross { top: 62%; right: 44%; width: 34px; height: 34px; background: var(--purple); transform: rotate(24deg); animation: spin 14s linear infinite; } .deco--dots { top: 6%; left: 30%; width: 90px; height: 46px; border: none; background-image: radial-gradient(var(--ink) 2px, transparent 2px); background-size: 14px 14px; opacity: 0.35; } /* Browser mock ------------------------------------------------------------- */ .hero__visual { position: relative; } .window { background: var(--paper); border: var(--border); box-shadow: var(--sh-lg); transition: transform 0.3s var(--ease-pop); } .window__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.65rem 0.85rem; background: var(--ink); border-bottom: var(--border); } .window__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--paper); } .window__dot:nth-child(1) { background: var(--pink); } .window__dot:nth-child(2) { background: var(--yellow); } .window__dot:nth-child(3) { background: var(--lime); } .window__url { margin-left: auto; padding: 0.15rem 0.6rem; background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: 0.7rem; } .window__body { padding: 1.15rem; display: grid; gap: 1rem; } .mock-hero { position: relative; padding: 1.4rem; background: var(--yellow); border: var(--border); box-shadow: var(--sh-sm); } .mock-hero__kicker { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; } .mock-hero__name { margin-top: 0.35rem; font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 0.92; text-transform: uppercase; } .mock-hero__badge { position: absolute; right: -0.5rem; bottom: -0.75rem; padding: 0.3rem 0.7rem; background: var(--ink); color: var(--paper); border: var(--border); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; transform: rotate(-3deg); } .mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 46px; gap: 0.6rem; } .mock-tile { border: var(--border); animation: tilepop 4.5s ease-in-out infinite; } .mock-tile--a { background: var(--cyan); grid-column: span 2; } .mock-tile--b { background: var(--pink); animation-delay: 0.4s; } .mock-tile--c { background: var(--paper-2); animation-delay: 0.8s; } .mock-tile--d { background: var(--purple); grid-column: span 2; animation-delay: 1.2s; } /* Floating stickers -------------------------------------------------------- */ .sticker { position: absolute; display: grid; place-items: center; padding: 0.5rem 0.85rem; border: var(--border); box-shadow: var(--sh-sm); font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.04em; } .sticker--1 { top: -1.25rem; left: -1rem; background: var(--pink); transform: rotate(-8deg); animation: float 6s ease-in-out infinite; } .sticker--2 { right: -1.25rem; top: 38%; background: var(--lime); transform: rotate(9deg); animation: float 7.5s ease-in-out infinite 0.6s; } .sticker--3 { bottom: -1.5rem; left: 18%; background: var(--cyan); font-size: 1.1rem; transform: rotate(-4deg); animation: spin 11s linear infinite; } /* ------------------------------------------------------------------------- 6. Marquee ------------------------------------------------------------------------- */ .marquee { position: relative; padding-block: 0.85rem; background: var(--ink); color: var(--paper); border-block: var(--border); overflow: hidden; } .marquee__track { display: flex; align-items: center; gap: 1.5rem; width: max-content; animation: scroll-x 32s linear infinite; } .marquee__item { font-family: var(--font-display); font-size: clamp(0.95rem, 2vw, 1.35rem); letter-spacing: 0.03em; white-space: nowrap; } .marquee__sep { color: var(--yellow); font-size: 1rem; } /* ------------------------------------------------------------------------- 7. Section scaffolding ------------------------------------------------------------------------- */ .section { position: relative; padding-block: var(--section-y); border-bottom: var(--border); } .section--alt { background: var(--paper-2); } .section--dark { background: var(--ink); color: var(--paper); } .section--dark .section__lede { color: rgba(255, 248, 236, 0.78); } .section__head { max-width: 62ch; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); } .section__head--split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: 2rem; max-width: none; } .section__title { font-size: clamp(2rem, 4.6vw, 3.4rem); } .section__lede { margin-top: 1rem; font-size: 1.0625rem; } .kicker { display: inline-block; margin-bottom: 0.85rem; padding: 0.3rem 0.75rem; background: var(--pink); border: var(--border); box-shadow: var(--sh-sm); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } /* Card base ---------------------------------------------------------------- */ .card { position: relative; background: var(--paper); border: var(--border); box-shadow: var(--sh); transition: transform 0.18s var(--ease-pop), box-shadow 0.18s var(--ease-pop); } .card:hover { transform: translate(-4px, -4px); box-shadow: var(--sh-lg); } .card--yellow { background: var(--yellow); } .card--cyan { background: var(--cyan); } .card--pink { background: var(--pink); } .card--lime { background: var(--lime); } .card--orange { background: var(--orange); } .card--purple { background: var(--purple); } .card--paper { background: var(--paper); } /* ------------------------------------------------------------------------- 8. Personas ------------------------------------------------------------------------- */ .persona-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: clamp(1.25rem, 3vw, 2rem); } .persona { padding: 1.75rem 1.5rem 1.5rem; } .persona__tag { position: absolute; top: -0.9rem; right: 1rem; padding: 0.2rem 0.6rem; background: var(--ink); color: var(--paper); border: var(--border); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; } .persona__icon { font-size: 1.9rem; line-height: 1; } .persona__title { margin-top: 0.75rem; font-size: 1.35rem; } .persona__blurb { margin-top: 0.75rem; font-size: 0.9375rem; } .persona__goal { margin-top: 1.25rem; padding-top: 1rem; border-top: var(--border); font-size: 0.875rem; font-weight: 700; } .persona__goal-label { display: block; font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; } /* ------------------------------------------------------------------------- 9. Template gallery ------------------------------------------------------------------------- */ /* The same ladder as the gallery in gallery.css, and for the same reason: eight templates across four columns is two rows. `auto-fit` with a 290px floor gave three columns on every desktop width — 1200px of grid, three screens deep on a phone — and the count is the point, so it is stated rather than derived. */ .tpl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.7rem, 2vw, 1.75rem); } @media (min-width: 44rem) { .tpl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 64rem) { .tpl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .tpl { display: flex; flex-direction: column; padding: 1rem; } .tpl__meta { padding: 1.1rem 0.25rem 0.75rem; } .tpl__name { font-size: 1.25rem; } .tpl__kind { margin-top: 0.25rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; } /* Clamped to two lines. At desktop widths the longest of these already fits in two, so this only bites on a phone, where it stops one wordy entry making every card in its row taller. */ .tpl__best { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: 0.6rem; font-size: 0.875rem; } .tpl__link { display: inline-flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 0.7rem 0.9rem; background: var(--ink); color: var(--paper); border: var(--border); font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; transition: background-color 0.16s ease, color 0.16s ease; } .tpl__link:hover, .tpl__link:focus-visible { background: var(--paper); color: var(--ink); } .tpl__link span { transition: transform 0.2s var(--ease-pop); } .tpl__link:hover span { transform: translateX(5px); } .tpl__link--soon { background: transparent; color: var(--ink); border-style: dashed; } .tpl__link--soon:hover, .tpl__link--soon:focus-visible { background: var(--ink); color: var(--paper); } /* Two columns of a phone is a 127px card carrying a picture, a name, a kind, a "best for" line and a button. Everything shrinks rather than anything being dropped — the kind and the audience are the two things that tell you whether a template is for you, which is the whole reason to read the card. */ @media (max-width: 44rem) { .tpl { padding: 0.6rem; } .tpl__meta { padding: 0.8rem 0.15rem 0.6rem; } .tpl__name { font-size: 1rem; } .tpl__kind { font-size: 0.625rem; letter-spacing: 0.06em; } .tpl__best { margin-top: 0.45rem; font-size: 0.75rem; } .tpl__link { padding: 0.55rem 0.6rem; font-size: 0.6875rem; } } @media (max-width: 26rem) { .tpl { padding: 0.45rem; } .tpl__meta { padding: 0.6rem 0.1rem 0.5rem; } .tpl__name { font-size: 0.875rem; line-height: 1.1; } .tpl__kind { margin-top: 0.2rem; font-size: 0.5625rem; } .tpl__best { margin-top: 0.35rem; font-size: 0.6875rem; line-height: 1.3; } .tpl__link { padding: 0.45rem 0.5rem; font-size: 0.625rem; letter-spacing: 0; } } .tpl-note { margin-top: 2.5rem; font-size: 0.9375rem; font-weight: 700; text-align: center; } .tpl-note__link { border-bottom: 3px solid var(--pink); } .tpl-note__link:hover, .tpl-note__link:focus-visible { background: var(--pink); } /* The plan a template needs, on its card. Inline with the name rather than floating over the miniature: on a two-column phone layout a card is about 150px wide, and there is no room over the picture that is not the picture. */ .tpl__plan { display: inline-block; padding: 0.08em 0.4em; background: var(--purple); border: 2px solid var(--ink); font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; } /* ------------------------------------------------------------------------- Digital invitations The one place on this site where the house style has to hold something that refuses to wear it. An invitation is whatever its owner ordered — watercolour, gold leaf, a script typeface — and the card around it is heavy borders and flat colour. The card therefore behaves as a *frame*: the neo-brutalism is all in the mount and the caption, and the picture inside it is left completely alone. No overlay, no tint, no duotone. Three columns rather than the gallery's four, because these are photographs and a photograph at a quarter of the shell is too small to be worth showing. ------------------------------------------------------------------------- */ .inv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.7rem, 2vw, 1.75rem); } @media (min-width: 48rem) { .inv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 72rem) { .inv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .inv-card { padding: 0.9rem; } /* The whole card is one link. An wrapping the picture, the name and the button is one tab stop and one target instead of three, which on a phone is the difference between a card you can hit and one you have to aim at. */ .inv-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; } /* Fixed portrait ratio, so a row of cards is a row rather than a staircase — invitations arrive at whatever aspect their designer exported. */ .inv-card__frame { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 3 / 4; background: var(--paper); border: var(--border); } .inv-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease-pop); } .inv-card__link:hover .inv-card__img { transform: scale(1.04); } .inv-card__mark { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; } .inv-card__body { display: block; padding: 0.9rem 0.2rem 0.7rem; } .inv-card__name { display: block; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.15; overflow-wrap: anywhere; } .inv-card__when { display: block; margin-top: 0.3rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; } .inv-card__where { display: block; margin-top: 0.35rem; font-size: 0.85rem; font-weight: 700; } .inv-card__go { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 0.7rem 0.9rem; background: var(--ink); color: var(--paper); border: var(--border); font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; transition: background-color 0.16s ease, color 0.16s ease; } .inv-card__link:hover .inv-card__go, .inv-card__link:focus-visible .inv-card__go { background: var(--paper); color: var(--ink); } .inv-card__go span { transition: transform 0.2s var(--ease-pop); } .inv-card__link:hover .inv-card__go span { transform: translateX(5px); } @media (max-width: 44rem) { .inv-card { padding: 0.6rem; } .inv-card__body { padding: 0.7rem 0.15rem 0.55rem; } .inv-card__name { font-size: 0.95rem; } .inv-card__when { font-size: 0.625rem; letter-spacing: 0.05em; } .inv-card__where { margin-top: 0.25rem; font-size: 0.75rem; } .inv-card__go { padding: 0.55rem 0.6rem; font-size: 0.6875rem; } } @media (max-width: 26rem) { .inv-card { padding: 0.45rem; } .inv-card__name { font-size: 0.875rem; } .inv-card__go { padding: 0.45rem 0.5rem; font-size: 0.625rem; letter-spacing: 0; } } /* The zoom is decoration on a photograph nobody asked to move. */ @media (prefers-reduced-motion: reduce) { .inv-card__img { transition: none; } .inv-card__link:hover .inv-card__img { transform: none; } } /* ------------------------------------------------------------------------- Plans Two cards, and the paid one wears the same purple the dashboard and the admin panel use for it, so all three halves of the application are visibly talking about the same thing. ------------------------------------------------------------------------- */ .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.25rem, 2.5vw, 1.75rem); align-items: start; } .plan { display: flex; flex-direction: column; padding: 1.6rem 1.4rem; } .plan__head { padding-bottom: 0.9rem; margin-bottom: 1rem; border-bottom: var(--border); } .plan__name { display: flex; align-items: center; gap: 0.45rem; font-size: 1.4rem; } .plan__mark { font-size: 1.1rem; } .plan__price { margin-top: 0.4rem; font-family: var(--font-display); font-size: 1.8rem; line-height: 1.05; } .plan__per { display: block; margin-top: 0.3rem; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.72; } .plan__lede { font-size: 0.9rem; font-weight: 700; } .plan__list { display: grid; gap: 0.7rem; margin: 0.9rem 0 1.5rem; padding-left: 0; font-size: 0.9rem; /* Or the browser's own bullet sits next to the drawn one and every line starts with two markers. */ list-style: none; } /* A drawn marker rather than a typed bullet, like everything else here. */ .plan__list li { position: relative; padding-left: 1.5rem; } .plan__list li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 0.65rem; height: 0.65rem; background: var(--ink); } .plan__list strong { display: block; } .plan__go { align-self: flex-start; margin-top: auto; } .plan-note { max-width: 44rem; margin: 2rem auto 0; padding: 0.9rem 1.1rem; background: var(--paper); border: var(--border); box-shadow: var(--sh-sm); font-size: 0.9rem; text-align: center; } .plan-fine { max-width: 46rem; margin: 1.5rem auto 0; font-size: 0.9rem; text-align: center; } /* Template miniatures live in assets/css/template-preview.css so the dashboard can use them too. Load both files together. */ /* ------------------------------------------------------------------------- 10. Features ------------------------------------------------------------------------- */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); gap: clamp(1.25rem, 2.5vw, 1.75rem); } .feature { display: flex; flex-direction: column; padding: 1.5rem 1.35rem; } .feature__icon { font-size: 1.7rem; line-height: 1; } .feature__title { margin-top: 0.85rem; font-size: 1.1rem; } .feature__blurb { margin-top: 0.65rem; margin-bottom: 1.25rem; font-size: 0.9rem; } .badge { align-self: flex-start; margin-top: auto; padding: 0.3rem 0.6rem; border: 2px solid var(--ink); font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .badge.is-core { background: var(--ink); color: var(--paper); } .badge.is-next { background: var(--paper); } .badge.is-later { background: transparent; border-style: dashed; } /* ------------------------------------------------------------------------- 11. How it works ------------------------------------------------------------------------- */ .step-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); padding: 0; list-style: none; counter-reset: step; } .step { position: relative; padding-top: 1rem; } .step__n { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; background: var(--yellow); color: var(--ink); border: var(--border); box-shadow: var(--sh); font-family: var(--font-display); font-size: 1.6rem; transition: transform 0.2s var(--ease-pop); } /* An ink shadow is invisible on the dark band — flip it to paper. */ .section--dark .step__n { box-shadow: 6px 6px 0 var(--paper); } .step:hover .step__n { transform: rotate(-6deg) translateY(-4px); } .step__n--cyan { background: var(--cyan); } .step__n--pink { background: var(--pink); } .step__body { margin-top: 1.35rem; } .step__title { font-size: 1.35rem; } .step__blurb { margin-top: 0.7rem; font-size: 0.9375rem; } .section--dark .step__blurb { color: rgba(255, 248, 236, 0.8); } /* Connector line between steps on wide screens */ @media (min-width: 900px) { .step:not(:last-child)::after { content: ""; position: absolute; top: 2.85rem; left: 4.5rem; right: -2rem; height: 3px; background: repeating-linear-gradient(90deg, var(--paper) 0 10px, transparent 10px 20px); } } /* ------------------------------------------------------------------------- 12. Roadmap / targets ------------------------------------------------------------------------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(1.25rem, 2.5vw, 1.75rem); } .stat { padding: 1.5rem 1.35rem; } .stat__value { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.4rem); line-height: 1; } .stat__unit { margin-top: 0.35rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; } .stat__label { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 2px solid var(--ink); font-size: 0.875rem; } .roadmap-disclaimer { margin-top: 2.5rem; padding: 1.15rem 1.35rem; background: var(--paper); border: var(--border); border-left-width: 12px; box-shadow: var(--sh-sm); font-size: 0.9375rem; } /* ------------------------------------------------------------------------- 13. FAQ ------------------------------------------------------------------------- */ .faq { display: grid; gap: 1rem; } .faq__item { background: var(--paper); border: var(--border); box-shadow: var(--sh-sm); transition: box-shadow 0.18s var(--ease-pop), transform 0.18s var(--ease-pop); } .faq__item[open] { box-shadow: var(--sh); transform: translate(-2px, -2px); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; font-family: var(--font-display); font-size: 1rem; text-transform: uppercase; cursor: pointer; list-style: none; } .faq__q::-webkit-details-marker { display: none; } .faq__sign { position: relative; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; background: var(--yellow); border: 2px solid var(--ink); } .faq__sign::before, .faq__sign::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.85rem; height: 3px; background: var(--ink); transform: translate(-50%, -50%); transition: transform 0.22s var(--ease-pop); } .faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); } .faq__item[open] .faq__sign { background: var(--pink); } .faq__item[open] .faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); } .faq__a { padding: 0 1.25rem 1.25rem; border-top: 2px dashed var(--ink); padding-top: 1rem; } .faq__item[open] .faq__a { animation: slide-down 0.24s ease both; } /* ------------------------------------------------------------------------- 14. Final CTA ------------------------------------------------------------------------- */ .cta { padding-block: var(--section-y); background: var(--cyan); border-bottom: var(--border); } .cta__box { position: relative; max-width: 780px; margin-inline: auto; padding: clamp(2rem, 5vw, 3.25rem); background: var(--paper); border: var(--border); box-shadow: var(--sh-lg); text-align: center; } .cta__stamp { position: absolute; top: -1.4rem; right: -1.1rem; display: grid; place-items: center; width: 5.25rem; height: 5.25rem; background: var(--yellow); border: var(--border); border-radius: 50%; box-shadow: var(--sh-sm); font-family: var(--font-display); font-size: 1rem; transform: rotate(-12deg); animation: wobble 5s ease-in-out infinite; } .cta__title { font-size: clamp(1.9rem, 4.4vw, 3rem); } .cta__lede { max-width: 48ch; margin: 1.1rem auto 0; } .cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; } .cta__fineprint { margin-top: 1.1rem; font-size: 0.8125rem; font-weight: 700; } /* ------------------------------------------------------------------------- 15. Footer ------------------------------------------------------------------------- */ .site-footer { padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; background: var(--ink); color: var(--paper); } .footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3rem); } .footer-brand__blurb { max-width: 40ch; margin-top: 1.15rem; font-size: 0.9375rem; color: rgba(255, 248, 236, 0.78); } .footer-built { margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.75rem; color: rgba(255, 248, 236, 0.55); } .footer-col__title { font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--yellow); } .footer-col ul { display: grid; gap: 0.55rem; margin-top: 1rem; padding: 0; list-style: none; font-size: 0.9375rem; } .footer-col__note { margin-top: 1rem; font-size: 0.875rem; color: rgba(255, 248, 236, 0.7); } .footer-col a { transition: color 0.15s ease; } .footer-col a:hover, .footer-col a:focus-visible { color: var(--cyan); text-decoration: underline; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 3px solid rgba(255, 248, 236, 0.25); font-size: 0.8125rem; color: rgba(255, 248, 236, 0.65); } /* Back to top -------------------------------------------------------------- */ .to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90; display: grid; place-items: center; width: 3rem; height: 3rem; background: var(--yellow); border: var(--border); box-shadow: var(--sh-sm); font-weight: 900; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s var(--ease-pop), visibility 0.2s; } .to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .to-top:hover { background: var(--pink); } /* ------------------------------------------------------------------------- 16. Scroll reveal ------------------------------------------------------------------------- */ /* Scoped to `.js` (set by an inline script in the head) so that without JavaScript every element renders normally instead of staying invisible. */ .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.55s ease var(--reveal-delay, 0ms), transform 0.55s var(--ease-pop) var(--reveal-delay, 0ms); } .js [data-reveal].is-revealed { opacity: 1; transform: none; } /* ------------------------------------------------------------------------- 17. Keyframes ------------------------------------------------------------------------- */ @keyframes float { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-14px) rotate(var(--rot, 0deg)); } } .sticker--1 { --rot: -8deg; } .sticker--2 { --rot: 9deg; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } } @keyframes tilepop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes blink { 50% { opacity: 0; } } @keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes wobble { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(4deg) scale(1.05); } } @keyframes slide-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------------------- 18. Responsive ------------------------------------------------------------------------- */ @media (max-width: 1000px) { .hero__inner { grid-template-columns: 1fr; } .hero__visual { max-width: 520px; } .section__head--split { grid-template-columns: 1fr; align-items: start; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: span 2; } } /* ------------------------------------------------------------------------- The header, between the hamburger and a laptop Signed in as an administrator the header carries three buttons — Admin, My portfolio, Dashboard — as well as five section links, and that is more than the row holds until about 1040px: it overflowed by 46px at 900px and the whole page could be panned sideways. How many items the row holds depends on who is looking at it: a visitor sees up to seven links and two buttons, an administrator ten items in all — the Admin button is the straw that broke an iPad. So the breakpoint depends on who is looking too. The partial stamps `site-header--admin` on the header when the signed-in user is an administrator, and that variant hands over to the hamburger a whole band earlier (1240px instead of 1080px) rather than pixel-fitting a row that genuinely cannot hold ten items on a tablet. Everyone else keeps the row they already had. From wherever the row starts up to 1400px it is tightened, which keeps every button reachable where hiding one would not. main.js picks its close-the-panel threshold off the same class — change one and change the other. ------------------------------------------------------------------------- */ @media (min-width: 1081px) and (max-width: 1400px) { .site-header__inner { gap: 0.7rem; } .site-nav { gap: 0.9rem; } .site-nav__list { gap: 0.85rem; } .site-nav__actions { gap: 0.4rem; } .site-nav__actions .btn { padding: 0.6rem 0.75rem; font-size: 0.72rem; } } /* The administrator's header: the hamburger takes over for the whole tablet- to-small-laptop band. A condensed copy of the panel rules below, scoped to the variant — the veil is the header's next sibling in the partial. */ @media (min-width: 1081px) and (max-width: 1240px) { .site-header--admin .nav-toggle { display: block; } .site-header--admin .site-nav { position: fixed; inset: 4.5rem 0 auto 0; z-index: 45; display: grid; gap: 1.25rem; padding: 1.5rem 1.25rem 2rem; background: var(--paper); border-bottom: var(--border); box-shadow: 0 10px 0 rgba(20, 18, 16, 0.15); transform: translateY(-108%); opacity: 0; visibility: hidden; max-height: calc(100dvh - 4.5rem); overflow-y: auto; overscroll-behavior: contain; transition: transform 0.34s cubic-bezier(0.4, 0.0, 0.7, 1), opacity 0.22s ease-out, visibility 0.34s; } .site-header--admin .site-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; transition: transform 0.3s var(--ease-pop), opacity 0.16s ease-in, visibility 0s; } .site-header--admin + .nav-veil { position: fixed; inset: 0; z-index: 40; background: rgba(20, 18, 16, 0.38); opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s; cursor: pointer; } .site-header--admin + .nav-veil.is-open { opacity: 1; visibility: visible; transition: opacity 0.2s ease, visibility 0s; } .site-header--admin .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .site-header--admin .site-nav__list li { border-bottom: 2px dashed var(--ink); } .site-header--admin .site-nav__link { display: block; padding: 0.85rem 0.25rem; font-size: 1.05rem; } .site-header--admin .site-nav__actions { justify-content: stretch; } .site-header--admin .site-nav__actions .btn { flex: 1; justify-content: center; } .site-header--admin .site-nav__actions .btn--ghost { background: var(--paper); border-color: var(--ink); box-shadow: var(--sh-sm); } } @media (max-width: 1080px) { .nav-toggle { display: block; } /* Opening and closing get different curves on purpose. Both used to run on --ease-pop, which overshoots. Coming in that reads as a panel landing with weight. Going out it plays in reverse: the panel first nudges *down* — the wrong way — and then leaves in whatever is left of the 0.28s, which is most of the distance in barely a fifth of a second. That is the abruptness; it was never really about the duration. So closing gets a plain accelerating curve with no bounce, and a little longer to travel. The rules below are the closed state, and a transition declared on the state being moved *to* is the one that runs — so this block is the close and the `.is-open` block is the open. */ .site-nav { position: fixed; inset: 4.5rem 0 auto 0; /* Above the veil, below the header — so the panel covers the page and the button that closes it stays reachable. */ z-index: 45; display: grid; gap: 1.25rem; padding: 1.5rem 1.25rem 2rem; background: var(--paper); border-bottom: var(--border); box-shadow: 0 10px 0 rgba(20, 18, 16, 0.15); transform: translateY(-108%); opacity: 0; visibility: hidden; /* A scroll that starts inside the menu stays inside it. This is the part of a scroll lock worth having, and it costs nothing — unlike `overflow: hidden` on the body, which turns the body into a scroll container and drags the sticky header off the top of the screen. */ max-height: calc(100dvh - 4.5rem); overflow-y: auto; overscroll-behavior: contain; /* Fading slightly ahead of the movement takes the hard edge off the panel sliding back under the header. `visibility` is discrete and holds its old value for the whole duration, which is what keeps the panel on screen until it has finished leaving. */ transition: transform 0.34s cubic-bezier(0.4, 0.0, 0.7, 1), opacity 0.22s ease-out, visibility 0.34s; } .site-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; transition: transform 0.3s var(--ease-pop), opacity 0.16s ease-in, visibility 0s; } /* The backdrop. It is what makes "tap anywhere to close" discoverable — without something dimming behind the panel, there is nothing to tell you the rest of the page is waiting. */ .nav-veil { position: fixed; inset: 0; z-index: 40; background: rgba(20, 18, 16, 0.38); opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s; cursor: pointer; } .nav-veil.is-open { opacity: 1; visibility: visible; transition: opacity 0.2s ease, visibility 0s; } .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .site-nav__list li { border-bottom: 2px dashed var(--ink); } .site-nav__link { display: block; padding: 0.85rem 0.25rem; font-size: 1.05rem; } .site-nav__actions { justify-content: stretch; } .site-nav__actions .btn { flex: 1; justify-content: center; } .site-nav__actions .btn--ghost { background: var(--paper); border-color: var(--ink); box-shadow: var(--sh-sm); } .deco--cross, .deco--dots { display: none; } } /* The stamp is rotated, so its bounding box is wider than its own size — about 8px each side. Once the page gutter can no longer absorb that, stop letting it hang outside the box or it pushes the document sideways. */ @media (max-width: 900px) { .cta__stamp { right: 0; } } @media (max-width: 560px) { :root { --border-w: 3px; } .hero__visual { margin-inline: auto; } .sticker--1 { left: -0.5rem; } .sticker--2 { right: -0.5rem; } .cta__stamp { width: 4.25rem; height: 4.25rem; font-size: 0.85rem; } .footer-grid { grid-template-columns: 1fr; } .footer-brand { grid-column: span 1; } .to-top { right: 0.9rem; bottom: 0.9rem; } } /* ------------------------------------------------------------------------- 19. Motion & contrast preferences ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1 !important; transform: none !important; } .marquee__track { animation: none; } } @media (prefers-contrast: more) { :root { --border-w: 4px; } .section__lede, .footer-brand__blurb, .step__blurb { color: inherit; } } @media print { .site-header, .to-top, .marquee, .hero__deco, .cta__actions { display: none; } body { background: #fff; } .card, .window { box-shadow: none; } }