/* ========================================================================== Ory Frazier Coaching — site styles Recreated from the Squarespace original (template 5c5a5197, "fluid engine"). Design tokens below mirror the values measured on the live site. ========================================================================== */ /* --- Fonts --------------------------------------------------------------- The original site used Omnes Pro (Adobe Fonts, licensed through Squarespace). Fredoka + Nunito are the closest open-licensed matches (SIL OFL, see assets/fonts/OFL-*.txt). To switch back to Omnes Pro, add your Adobe Fonts kit in the page and change --font-heading / --font-body below to "omnes-pro". ------------------------------------------------------------------------ */ @font-face { font-family: "Fredoka"; src: url("../fonts/fredoka-variable-latin.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Nunito"; src: url("../fonts/nunito-variable-latin.woff2") format("woff2-variations"); font-weight: 200 1000; font-style: normal; font-display: swap; } /* --- Tokens -------------------------------------------------------------- */ :root { --font-heading: "Fredoka", "Trebuchet MS", system-ui, sans-serif; --font-body: "Nunito", system-ui, -apple-system, sans-serif; /* Colours (from the Squarespace palette) */ --bg: #f4f4f3; /* lightAccent — page background */ --ink: #4f4f4f; /* darkAccent — headings */ --text: #000; /* body copy */ /* Accent. #7877e6 was the Squarespace original, but white on it is only 3.76:1 — below the 4.5:1 AA threshold — and every primary CTA uses it at ~15px uppercase, too small for the large-text exemption. The old hover shade already cleared AA, so it is promoted to the default and the hover goes a step darker. Same hue and saturation; only lightness moves. --accent white on it 5.20:1 · as text on --bg 4.72:1 --accent-dark white on it 6.93:1 · as text on --bg 6.30:1 The original #7877e6 is recorded here rather than kept as a token: it has no compliant use as text or as a text background anywhere on the site. */ --accent: #5e5dd8; /* buttons / links */ --accent-dark: #4341dc; /* hover */ --white: #fff; /* Layout */ --page-max: 1400px; --gutter: 4vw; --gutter-mobile: 6vw; /* Header is transparent and overlaps the content, as on the original. This is its rendered height: vertical padding + one line of the logo. */ --header-h: calc(4vw + 2.7rem); /* Type scale. The Squarespace original ran a 1.3rem (23px) body, which suited three pages of short marketing copy. With real prose on the page that reads oversized, so the whole scale is stepped down. The hero keeps its own larger size below — that dramatic headline is the signature of the original design and worth preserving. */ --size-h1: clamp(2.2rem, 5.2vw, 4.6rem); --size-h2: clamp(1.7rem, 3.4vw, 3rem); --size-h3: clamp(1.4rem, 2.6vw, 2.3rem); --size-h4: clamp(1.2rem, 2.1vw, 1.9rem); --size-body: clamp(1rem, 1.32vw, 1.22rem); --size-button: clamp(0.85rem, 1vw, 0.95rem); } /* --- All-caps kerning ---------------------------------------------------- Fredoka's kern pairs are tuned for mixed-case text and are far too tight for all-caps. Anything followed by V is kerned -150/1000em, and several pairs appear in more than one lookup so the values compound. At weight 700 the natural gap between I and V is only 48 units, so -150 puts the glyphs 4-8px into each other at heading sizes — visible in "CO-ACTIVE". Every element below sets text-transform: uppercase, so none of these pairs apply as the designer intended. Turning kerning off restores the font's natural sidebearings. Body copy is mixed-case and keeps its kerning. ------------------------------------------------------------------------ */ h1, h2, h3, h4, .site-title, .button, .stat__figure, .project__meta, .race__name, .race__time, .credential__name, .details dt, .link-card__title, .site-footer a { font-kerning: none; } /* --- Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--size-body); font-weight: 500; line-height: 1.6; letter-spacing: 0.02em; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); font-weight: 700; line-height: 1.05; letter-spacing: 0; text-transform: uppercase; color: var(--ink); } h1 { font-size: var(--size-h1); } h2 { font-size: var(--size-h2); } h3 { font-size: var(--size-h3); } h4 { font-size: var(--size-h4); } p { margin: 0 0 1.2em; } p:last-child { margin-bottom: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.75rem 1.25rem; background: var(--accent); color: var(--white); border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } /* --- Header -------------------------------------------------------------- */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2vw var(--gutter); background: transparent; } .site-title { font-family: var(--font-heading); font-size: clamp(1.25rem, 2vw, 1.9rem); font-weight: 700; line-height: 1.2; text-transform: uppercase; color: #000; text-decoration: none; white-space: nowrap; } .site-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: clamp(0.7rem, 2vw, 2rem); } .site-nav a { color: #000; text-decoration: none; font-size: var(--size-body); font-weight: 500; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--accent); } .site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.35em; } /* --- Sections ------------------------------------------------------------ */ .section { position: relative; padding: clamp(3rem, 7vw, 7rem) var(--gutter); } /* First section on a page sits under the transparent header */ main > .section:first-child { padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 4rem)); } .section__inner { max-width: var(--page-max); margin: 0 auto; width: 100%; } /* Hero: full-bleed background photo with a light wash over it */ .hero { display: flex; align-items: center; justify-content: center; min-height: clamp(34rem, 78vw, 64rem); text-align: center; overflow: hidden; } .hero__bg, .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; } .hero__bg { z-index: 0; } .hero__bg img { object-fit: cover; object-position: center center; } /* 53% overlay — matches imageOverlayOpacity on the original hero section */ .hero__bg::after { content: ""; position: absolute; inset: 0; background: rgba(244, 244, 243, 0.53); } .hero__inner { position: relative; z-index: 1; max-width: var(--page-max); margin: 0 auto; width: 100%; } .hero h1 { font-size: clamp(2.5rem, 6.4vw, 5.8rem); max-width: 80%; margin: 0 auto; } .hero__lede { max-width: 46%; margin: 1.6rem auto 0; } .hero .button { margin-top: 2rem; } /* Two-column split sections */ .split { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; } /* image 12/24 cols, text 9/24 cols on the original */ .split--image-left { grid-template-columns: minmax(0, 12fr) minmax(0, 9fr); } /* text 8/24, form 12/24 */ .split--text-form { grid-template-columns: minmax(0, 8fr) minmax(0, 12fr); align-items: start; } /* About: heading sits alone above the copy; the photo starts level with the first paragraph and runs long, as on the original. text 13/24, image 11/24 */ .split--text-image { grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); grid-template-areas: "title ." "body media"; align-items: start; row-gap: clamp(1.5rem, 2vw, 2.5rem); } .split--text-image .split__title { grid-area: title; } .split--text-image .split__body { grid-area: body; } .split--text-image .split__media { grid-area: media; align-self: stretch; } .split--text-image .split__media img { height: 100%; max-height: none; } /* Contact: heading runs wider than the form column (14/24 on the original), photo fills the right side top to bottom. form 10/24, image 11/24 */ .split--form-image { grid-template-columns: minmax(0, 10fr) minmax(0, 11fr); grid-template-areas: "title title" "body media"; align-items: start; row-gap: clamp(1.5rem, 2vw, 2.5rem); } .split--form-image .split__title { grid-area: title; max-width: 60%; } .split--form-image .split__body { grid-area: body; } .split--form-image .split__media { grid-area: media; align-self: stretch; } .split--form-image .split__media img { height: 100%; max-height: none; } .split__media img { width: 100%; height: 100%; max-height: 90vh; object-fit: cover; object-position: center center; } .stack > * + * { margin-top: 1.6rem; } .prose p { margin-bottom: 1.4em; } /* --- Section + text helpers ---------------------------------------------- */ .section--tight { padding-top: clamp(1.5rem, 3vw, 3rem); padding-bottom: clamp(1.5rem, 3vw, 3rem); } .section__inner.narrow { max-width: 46rem; } .lede { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--ink); } /* --- Stats strip ---------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem); margin: 0; padding: 0; list-style: none; } .stat { display: flex; flex-direction: column; gap: 0.25rem; } .stat__figure { font-family: var(--font-heading); font-size: clamp(1.7rem, 3.2vw, 2.8rem); font-weight: 700; line-height: 1; color: var(--accent); } .stat__label { font-size: clamp(0.85rem, 1.1vw, 1.05rem); line-height: 1.3; color: var(--ink); } /* --- Coaching tracks ------------------------------------------------------ */ .tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); } /* Three projects: 3-up on wide screens, reflowing down to one */ .projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(2rem, 3.5vw, 3.5rem); align-items: start; } .track h2, .project h2 { font-size: clamp(1.3rem, 2vw, 1.85rem); margin-bottom: 0.7em; } .track__list { margin: 1.2em 0; padding-left: 1.2em; } .track__list li { margin-bottom: 0.5em; } /* --- Projects ------------------------------------------------------------- */ .project__meta { margin-top: 0.3rem; font-family: var(--font-heading); font-size: clamp(0.95rem, 1.2vw, 1.15rem); font-weight: 500; text-transform: uppercase; color: var(--accent); } .project__links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } /* Specificity note: the base .button rules are declared later in this file, so the modifier needs two classes to win. */ .button.button--ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); } .button.button--ghost:hover, .button.button--ghost:focus-visible { background: var(--accent); color: var(--white); } /* Same source-order hazard as .button--ghost above: the base .button rule is declared later at equal (0,1,0) specificity and would re-set background and cursor, so this modifier also needs two classes to win. */ .button.button--disabled { background: rgba(79, 79, 79, 0.3); cursor: default; pointer-events: none; } /* --- Race list ------------------------------------------------------------ */ .races { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(79, 79, 79, 0.2); } .race { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem clamp(1rem, 3vw, 3rem); padding: clamp(0.9rem, 1.5vw, 1.3rem) 0; border-bottom: 1px solid rgba(79, 79, 79, 0.2); } .race__name { grid-column: 1; font-family: var(--font-heading); font-size: clamp(1rem, 1.4vw, 1.3rem); font-weight: 700; text-transform: uppercase; line-height: 1.2; color: var(--ink); } .race__meta { grid-column: 1; font-size: clamp(0.85rem, 1.1vw, 1.05rem); color: var(--ink); opacity: 0.85; } .race__time { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-heading); font-size: clamp(1rem, 1.45vw, 1.35rem); font-weight: 700; color: var(--accent); white-space: nowrap; } /* --- Photos with captions ------------------------------------------------ */ .photo { margin: 0; } .photo img { width: 100%; height: auto; border-radius: 10px; } .photo figcaption { margin-top: 0.6rem; font-size: clamp(0.8rem, 1vw, 0.95rem); line-height: 1.4; color: var(--ink); /* see --credential__meta: 0.75 is 4.01:1, under AA; 0.85 is 5.06:1 */ opacity: 0.85; } .photo figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; } .photo figcaption a:hover, .photo figcaption a:focus-visible { color: var(--accent); } /* Copy beside a portrait-orientation photo — the photo stays modest so a low-resolution source is never asked to fill a wide column. */ .split--text-portrait { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); align-items: center; } /* --- Details list (coaching specifics) ----------------------------------- */ /* Term and value are separate grid items, so the row rhythm has to be applied to BOTH or they drift apart: padding on the value alone pushed each label below its own value, and a border on the value alone made the rules start at the second column instead of spanning the row. */ .details { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); margin: clamp(1.5rem, 2.5vw, 2.5rem) 0 0; border-top: 1px solid rgba(79, 79, 79, 0.2); } .details dt, .details dd { padding-top: clamp(0.7rem, 1.2vw, 1rem); padding-bottom: clamp(0.7rem, 1.2vw, 1rem); border-bottom: 1px solid rgba(79, 79, 79, 0.12); } .details dt { font-family: var(--font-heading); font-size: clamp(0.9rem, 1.15vw, 1.05rem); font-weight: 700; line-height: 1.5; text-transform: uppercase; color: var(--ink); } .details dd { /* column-gap would break the rule into two segments, so the gutter is padding on the value instead. */ margin: 0; padding-left: clamp(1rem, 2.5vw, 2.5rem); } .details dt:last-of-type, .details dd:last-of-type { border-bottom: 0; } .details strong { /* dd inherits --text (#000); --ink is lighter, so colouring the emphasis with it would make the price recede rather than stand out. */ font-weight: 700; } /* --- Credential badge ---------------------------------------------------- */ .credential { display: inline-flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.4rem); margin: clamp(2rem, 3vw, 3rem) 0 0; text-decoration: none; border-radius: 12px; } .credential__text { display: flex; flex-direction: column; gap: 0.15rem; } .credential img { flex: none; width: clamp(84px, 8vw, 120px); height: auto; } .credential__name { font-family: var(--font-heading); font-size: clamp(0.95rem, 1.3vw, 1.2rem); font-weight: 700; line-height: 1.2; text-transform: uppercase; color: var(--ink); } .credential__meta { font-size: clamp(0.85rem, 1.05vw, 1rem); color: var(--ink); /* 0.75 composited to 4.01:1 against --bg, under AA. 0.85 gives 5.06:1. */ opacity: 0.85; max-width: 26ch; } .credential:hover .credential__name, .credential:focus-visible .credential__name { color: var(--accent); } .credential:hover .credential__meta, .credential:focus-visible .credential__meta { opacity: 1; } /* --- Buttons ------------------------------------------------------------- */ .button { display: inline-block; padding: 1.5em 2em; border: 0; border-radius: 300px; background: var(--accent); color: var(--white); font-family: var(--font-heading); font-size: var(--size-button); font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .button:hover, .button:focus-visible { background: var(--accent-dark); transform: translateY(-1px); } /* --- Link hub (/links) --------------------------------------------------- The share-one-URL page: the destination for a bio link, a QR code or a talk slide. Everything is a full-width tap target in one column at every width, because the whole page exists to be used on a phone. ------------------------------------------------------------------------ */ .profile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; margin-bottom: clamp(2rem, 4vw, 3rem); } /* The portrait is a full-body frame, so a plain square crop of it leaves the face too small to recognise at avatar size. The wrapper does the clipping and the image is scaled up inside it: object-position picks the head, the scale factor tightens to head-and-shoulders. Scaling stays sharp because the source is 750px wide and the circle renders at ~150. */ .profile__avatar { width: clamp(6.5rem, 20vw, 9.5rem); aspect-ratio: 1; overflow: hidden; border-radius: 50%; margin-bottom: 0.4rem; } .profile__portrait { width: 100%; height: 100%; object-fit: cover; object-position: 47% 33%; transform: scale(2.3); } .profile__blurb { max-width: 32rem; color: var(--ink); } .link-group { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); } .link-group h2 { font-size: clamp(0.95rem, 1.25vw, 1.1rem); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.8rem; } .link-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .link-card { display: flex; flex-direction: column; gap: 0.25rem; padding: clamp(1rem, 2vw, 1.3rem) clamp(1.1rem, 2.2vw, 1.6rem); border-radius: 1.1rem; background: var(--white); color: var(--text); text-decoration: none; /* An inset ring rather than a border: it costs no layout box, so the card can thicken it on hover without the whole stack shifting by a pixel. */ box-shadow: inset 0 0 0 2px rgba(94, 93, 216, 0.25); transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .link-card:hover, .link-card:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); transform: translateY(-1px); } .link-card__title { font-family: var(--font-heading); font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 600; line-height: 1.25; color: var(--accent-dark); } .link-card__note { font-size: clamp(0.9rem, 1.15vw, 1rem); line-height: 1.45; color: var(--ink); } /* The one card that is the point of the page. Declared after the base so it wins at equal specificity; the hover pair below it for the same reason against `.link-card:hover`, which is (0,2,0). */ .link-card--primary { background: var(--accent); box-shadow: none; } .link-card--primary .link-card__title, .link-card--primary .link-card__note { color: var(--white); } .link-card--primary:hover, .link-card--primary:focus-visible { background: var(--accent-dark); box-shadow: none; } /* --- Forms --------------------------------------------------------------- */ .form { display: grid; gap: 1.25rem; } .form__field { display: grid; gap: 0.4rem; } .form__field label { font-family: var(--font-body); font-size: clamp(0.95rem, 1.2vw, 1.1rem); font-weight: 600; color: var(--ink); } .form input[type="text"], .form input[type="email"], .form textarea { width: 100%; padding: 0.85em 1em; border: 1px solid rgba(79, 79, 79, 0.35); border-radius: 8px; background: var(--white); color: var(--text); font-family: var(--font-body); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.5; } .form textarea { min-height: 10rem; resize: vertical; } /* Focus indicator (WCAG 2.4.11). The previous rule killed the global focus outline and replaced it with a 25%-alpha accent glow that composites to about 1.31:1 against the white field — invisible in practice, on the only conversion path on the site. An opaque --accent-dark outline clears 3:1 against both the white field (about 5.2:1) and the page background (about 4.7:1); the accent border is kept as the softer secondary cue. */ .form input:focus, .form textarea:focus { outline: 3px solid var(--accent-dark); outline-offset: 2px; border-color: var(--accent); } .form__actions { margin-top: 0.5rem; } /* Honeypot — hidden from people, visible to naive bots */ .form__gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__status { margin: 0; font-weight: 700; color: var(--ink); } .form__status:empty { display: none; } /* The no-JS failure channel. The handler 303s to #form-error on this page, so :target reveals it with no script involved. Hidden the rest of the time. */ .form__error { display: none; margin: 0; padding: 0.9rem 1.1rem; border-radius: 8px; background: rgba(179, 38, 30, 0.08); border: 1px solid rgba(179, 38, 30, 0.35); color: #8c1d18; font-size: clamp(0.95rem, 1.2vw, 1.1rem); line-height: 1.5; } .form__error:target { display: block; } .form__error a { color: inherit; } .form__status--error { color: #b3261e; } /* --- Footer -------------------------------------------------------------- */ .site-footer { padding: clamp(3rem, 6vw, 6rem) var(--gutter); } .site-footer__inner { max-width: var(--page-max); margin: 0 auto; display: flex; justify-content: flex-end; gap: clamp(1rem, 2vw, 2rem); } .site-footer a { font-family: var(--font-heading); font-size: var(--size-h4); font-weight: 700; text-transform: uppercase; color: var(--ink); text-decoration: none; } .site-footer a:hover, .site-footer a:focus-visible { color: var(--accent); } /* --- Mobile -------------------------------------------------------------- */ @media (max-width: 767px) { :root { --gutter: var(--gutter-mobile); --header-h: calc(12vw + 3.6rem); } .site-header { padding: 6vw var(--gutter); } .hero { min-height: 32rem; text-align: center; } .hero h1, .hero__lede { max-width: 100%; } /* Every split stacks to one column; images fall last, as on the original */ .split { grid-template-columns: minmax(0, 1fr); } .split--text-image, .split--form-image { grid-template-areas: "title" "body" "media"; } .split--form-image .split__title { max-width: 100%; } .split--text-image .split__media, .split--form-image .split__media { align-self: auto; } .split--text-image .split__media img, .split--form-image .split__media img { height: auto; } .split--image-left .split__media { order: 2; } .split--image-left .split__body { order: 1; } .split__media img { max-height: 70vh; } .site-footer__inner { justify-content: flex-start; } .site-header { flex-wrap: wrap; gap: 0.6rem; } .site-nav a { font-size: clamp(0.95rem, 4vw, 1.15rem); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tracks { grid-template-columns: minmax(0, 1fr); } .race { grid-template-columns: minmax(0, 1fr); } .split--text-portrait { grid-template-columns: minmax(0, 1fr); justify-items: start; } .split--text-portrait .split__media { max-width: 60vw; } .race__time { grid-column: 1; grid-row: auto; } /* A 10rem label column leaves only ~170px for the value on a phone, which is not enough for the longer entries. Stack instead, and carry the row rule on the value only so each pair still reads as one block. */ .details { grid-template-columns: minmax(0, 1fr); } .details dt { padding-bottom: 0.15rem; border-bottom: 0; } .details dd { padding-top: 0; padding-left: 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }