/* OmniTaught marketing site. Self-contained; brand: navy/cream/coral/teal/gold. */ :root { --paper: #f9f5ed; --card: #fffdf8; --ink: #1a2f4f; --soft: #46587a; --faint: #8291ad; --line: #e6ddcd; --navy: #1a2f4f; --navy2: #13233b; --coral: #f0744f; --teal: #f0744f; /* accents follow omnipsyche coral */ --gold: #d9a13f; --shadow: 0 2px 6px rgba(26,47,79,.08), 0 14px 40px rgba(26,47,79,.10); /* surfaces that flip in dark mode */ --band: #1a2f4f; --band2: #13233b; --footer-bg: #13233b; --nav-bg: rgba(249, 245, 237, .92); --hero-a: #fdfaf3; --hero-c: #f3ecdd; --warm-tint: #fdeae3; --good-tint: #f6eed9; --red-tint: #f5dfdc; --red-ink: #7c3a3a; color-scheme: light; } /* Dark mode follows the visitor's system setting by default; the nav toggle stamps data-theme on to override in either direction. Bands and the coral accent already read well on dark, so only surfaces and text flip. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0e1a2c; --card: #16273f; --ink: #e9edf4; --soft: #aebbd1; --faint: #7d8fac; --line: #2b3d5c; --shadow: 0 2px 6px rgba(0,0,0,.35), 0 14px 40px rgba(0,0,0,.30); --band: #0f1d31; --band2: #0b1626; --footer-bg: #0b1626; --nav-bg: rgba(14, 26, 44, .92); --hero-a: #12233c; --hero-c: #0e1a2c; --warm-tint: #3a2a22; --good-tint: #35301f; --red-tint: #3d2424; --red-ink: #e4b6b6; color-scheme: dark; } } :root[data-theme="dark"] { --paper: #0e1a2c; --card: #16273f; --ink: #e9edf4; --soft: #aebbd1; --faint: #7d8fac; --line: #2b3d5c; --shadow: 0 2px 6px rgba(0,0,0,.35), 0 14px 40px rgba(0,0,0,.30); --band: #0f1d31; --band2: #0b1626; --footer-bg: #0b1626; --nav-bg: rgba(14, 26, 44, .92); --hero-a: #12233c; --hero-c: #0e1a2c; --warm-tint: #3a2a22; --good-tint: #35301f; --red-tint: #3d2424; --red-ink: #e4b6b6; color-scheme: dark; } .theme-btn { border: 1.5px solid var(--line); background: var(--card); color: var(--soft); border-radius: 50%; width: 34px; height: 34px; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; flex: 0 0 auto; } .theme-btn:hover { color: var(--ink); } * { box-sizing: border-box; margin: 0; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.6; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, .price, .flogo { font-family: Georgia, "Iowan Old Style", serif; line-height: 1.15; } h1 { font-size: clamp(2rem, 5vw, 3.3rem); } h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: 12px; } h3 { font-size: 1.15rem; margin: 10px 0 6px; } em { color: var(--coral); font-style: italic; } .center { text-align: center; } /* The content column, as two numbers rather than as literals scattered through four breakpoints. The header needs the same numbers to line its logo up with the sections underneath it, and a header that quietly drifts out of step with the column at one width is exactly the bug this replaces. */ :root { --col: 1080px; --gut: 22px; } @media (min-width: 1500px) { :root { --col: 1280px; --gut: 32px; } } @media (min-width: 1920px) { :root { --col: 1520px; --gut: 40px; } } @media (min-width: 2400px) { :root { --col: 1760px; } } .wrap { max-width: var(--col); margin: 0 auto; padding: 64px var(--gut); } .wrap.narrow { max-width: 860px; } .kicker { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; color: var(--coral); margin-bottom: 12px; } .tagline { font-family: Georgia, "Iowan Old Style", serif; font-style: italic; font-size: 1.2rem; color: #B0401C; margin-top: 10px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tagline { color: #ff9270; } :root:not([data-theme="light"]) .hero-art img { box-shadow: 0 24px 70px rgba(0,0,0,.5); } } :root[data-theme="dark"] .tagline { color: #ff9270; } :root[data-theme="dark"] .hero-art img { box-shadow: 0 24px 70px rgba(0,0,0,.5); } /* Genie line in the hero: accessible coral (brand coral fails AA at this size) */ .genie-hl { color: #B0401C; font-weight: 600; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .genie-hl { color: #ff9270; } } :root[data-theme="dark"] .genie-hl { color: #ff9270; } .lede { font-size: 1.15rem; color: var(--soft); margin: 12px 0 22px; max-width: 34em; } .sub { color: var(--soft); margin: -4px auto 30px; max-width: 40em; } .big { font-size: 1.15rem; color: var(--soft); margin: 12px 0; } .micro { font-size: .8rem; color: var(--faint); margin-top: 14px; } /* nav */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; background: var(--nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } /* The bar stays full bleed, its contents do not. The logo used to sit 22px from the window edge while every section below it started at the content column, so on a wide monitor the header floated hundreds of pixels to the left of the page it belongs to. This lines the logo up with the column and the nav links with its right edge. The max() means narrow windows, where there is no column margin to reclaim, keep the plain gutter they had. */ .nav { padding-inline: max(var(--gut), calc((100% - var(--col)) / 2 + var(--gut))); } .logo { font-family: Georgia, serif; font-size: 1.3rem; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 9px; } /* The OmniPsyche head as a mask, so it paints navy on light and light on dark */ .logo-mark { width: 26px; height: 29px; flex: 0 0 auto; background: var(--ink); -webkit-mask: url("img/head.png") center / contain no-repeat; mask: url("img/head.png") center / contain no-repeat; } .logo b { color: var(--coral); } .nav nav { display: flex; gap: 20px; align-items: center; } .nav nav a { text-decoration: none; color: var(--soft); font-size: .9rem; font-weight: 600; } .nav nav a:hover { color: var(--ink); } @media (max-width: 640px) { .nav nav a:not(.btn) { display: none; } } /* buttons */ .btn { display: inline-block; background: var(--coral); color: #fff; text-decoration: none; font-weight: 700; padding: 13px 26px; border-radius: 13px; font-size: 1rem; box-shadow: var(--shadow); } .btn:hover { background: #d95f3a; } .btn.ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); box-shadow: none; } .btn.small { padding: 8px 16px; font-size: .85rem; background: var(--coral); } .btn.block { display: block; text-align: center; margin-top: 16px; } .gold-btn { background: var(--gold); } .gold-btn:hover { background: #c08e2f; } .big-btn { background: var(--coral); font-size: 1.15rem; padding: 16px 36px; margin-top: 18px; } .big-btn:hover { background: #d95f3a; } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; } /* hero */ .hero { background: linear-gradient(160deg, var(--hero-a) 0%, var(--paper) 55%, var(--hero-c) 100%); border-bottom: 1px solid var(--line); overflow: hidden; } .hero-inner { max-width: 1150px; margin: 0 auto; padding: 64px 22px 72px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 42px; align-items: center; } @media (max-width: 880px) { .hero-inner { grid-template-columns: 1fr; padding-top: 40px; } } .hero-art { position: relative; } .hero-art img { border-radius: 22px; box-shadow: 0 24px 70px rgba(26,47,79,.25); } .float-card { position: absolute; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; box-shadow: var(--shadow); font-size: .82rem; line-height: 1.3; } .float-card b { display: block; font-size: .95rem; } .float-card span { color: var(--faint); } .f1 { top: -16px; right: 8%; } .f2 { bottom: -18px; left: 6%; } /* bands */ .band { background: var(--band); color: #edf1f7; } .band h2 { color: #fff; } .band .big { color: #c4cfdf; } .band.alt { background: var(--card); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .band.alt h2 { color: var(--ink); } .band.alt p { color: var(--soft); } /* features */ .grid { display: grid; gap: 18px; } .grid.four { grid-template-columns: repeat(4, 1fr); } .grid.three { grid-template-columns: repeat(3, 1fr); } .grid.two { grid-template-columns: 1fr 1fr; } @media (max-width: 880px) { .grid.four { grid-template-columns: 1fr 1fr; } .grid.three { grid-template-columns: 1fr; } } @media (max-width: 560px) { .grid.four, .grid.two { grid-template-columns: 1fr; } } .vs { font-size: .66rem; font-weight: 800; letter-spacing: .12em; color: var(--coral); margin-bottom: 2px; } .feature { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); } .feature p { color: var(--soft); font-size: .92rem; } .ficon { width: 44px; height: 44px; border-radius: 12px; color: #fff; font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; } /* split showcase */ .split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 46px; align-items: center; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; } } .ticks { list-style: none; padding: 0; margin: 14px 0 0; } .ticks li { padding-left: 28px; position: relative; margin: 9px 0; color: inherit; } .ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 800; } .band .ticks li::before, .plan.gold .ticks li::before { color: var(--gold); } /* CSS phone shot */ .phone-shot { display: flex; justify-content: center; } .ps-frame { width: 290px; background: var(--paper); border-radius: 30px; border: 8px solid var(--navy2); overflow: hidden; box-shadow: 0 26px 60px rgba(26,47,79,.3); } .ps-band { background: var(--navy); color: #ffd9a8; font-size: .58rem; text-align: center; padding: 5px; font-weight: 700; } .ps-body { padding: 16px 14px 22px; } .ps-eyebrow { font-size: .58rem; font-weight: 800; letter-spacing: .1em; color: var(--teal); } .ps-body h4 { margin: 2px 0 10px; } .ps-callout { border-left: 3px solid var(--teal); background: var(--warm-tint); border-radius: 0 8px 8px 0; font-size: .72rem; padding: 8px 10px; margin-bottom: 12px; } .ps-q { font-family: Georgia, serif; font-size: 1.3rem; font-weight: 700; text-align: center; } .ps-entry { max-width: 130px; margin: 8px auto; border-bottom: 3px solid var(--teal); text-align: center; font-size: 1.2rem; font-weight: 700; padding-bottom: 2px; } .ps-good { background: var(--good-tint); border-radius: 10px; font-size: .72rem; padding: 8px 10px; } .ps-row { font-size: .68rem; color: var(--soft); padding: 7px 0; border-bottom: 1px dashed var(--line); } .ps-row b { display: block; font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 1px; } .ps-red { font-size: .68rem; background: var(--red-tint); border-radius: 8px; padding: 7px 10px; margin-top: 10px; color: var(--red-ink); } .ps-red b { display: block; font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #b35d5d; margin-bottom: 1px; } .soon-tag { display: inline-block; vertical-align: 2px; margin-left: 8px; background: var(--line); color: var(--faint); font-size: .6rem; font-weight: 800; letter-spacing: .08em; padding: 2px 8px; border-radius: 8px; } /* topic tiles */ .cat { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .74rem; color: var(--teal); margin: 30px 0 10px; } .grid.tiles { grid-template-columns: repeat(3, 1fr); } @media (max-width: 880px) { .grid.tiles { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .grid.tiles { grid-template-columns: 1fr; } } .tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; box-shadow: var(--shadow); } .tile span { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 12px; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .tile b { font-size: .95rem; } .tile i { font-style: normal; font-size: .78rem; color: var(--faint); } /* topic genie */ .genie { border-top: 1px solid var(--line); } .gold-k { color: #c08e2f; } .genie .ps-band { background: linear-gradient(135deg, #c08e2f, var(--gold)); color: #fff; } .wishbar { margin-top: 18px; background: color-mix(in srgb, var(--gold) 12%, var(--card)); border: 1.5px solid var(--gold); border-radius: 14px; padding: 14px 18px; font-size: .9rem; color: var(--soft); } .wishbar b { color: var(--ink); } /* wish library dropdown (marketing page, live data from the app's API) */ .wl-drop { margin: 14px 0 18px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; } .wl-drop summary { cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: .92rem; color: var(--soft); list-style: none; } .wl-drop summary::before { content: "▸ "; color: var(--gold); } .wl-drop[open] summary::before { content: "▾ "; } .wl-drop summary::-webkit-details-marker { display: none; } .wl-drop > div { padding: 4px 16px 14px; } .wl-item { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); padding: 9px 10px; border-radius: 10px; margin: 2px 0; } .wl-item:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); } .wl-item b { font-size: .9rem; } .wl-item i { font-style: normal; font-size: .76rem; color: var(--faint); } .wl-ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; background: var(--gold); color: #fff; font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center; } .wl-free { margin-left: auto; font-size: .6rem; font-weight: 800; letter-spacing: .08em; color: var(--gold); } /* mental health education band */ .band.mh { background: linear-gradient(160deg, var(--band) 0%, var(--band2) 78%); } .band.mh .kicker { color: #ff8e6a; } .narrowp { max-width: 46em; margin-left: auto; margin-right: auto; } .mh-link { color: #ffd9a8; font-weight: 700; } .mh-link:hover { color: #fff; } .mh-tiles { margin-top: 30px; } /* Tiles that are links (the topics shelf, the /learn/ pages, the mh band) read as cards, not as underlined text; the lift on hover is the affordance. */ a.tile { text-decoration: none; color: var(--ink); transition: transform .08s ease, border-color .08s ease; } a.tile:hover { transform: translateY(-2px); border-color: var(--coral); } a.tile:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; } .mh-micro { color: #93a3bc; } /* creators */ .creators .grid.two { align-items: center; gap: 34px; } .creators .big { color: var(--soft); } /* Sibling work, deliberately quiet: it answers "what else does he build" for the few who wonder, without competing with the beta as a destination. */ .also { margin-top: 14px; font-size: .86rem; color: #7c8ba3; } .also a { color: #93a3bc; text-decoration: underline; text-underline-offset: 2px; } .also a:hover { color: var(--ink); } .foot-link { color: #93a3bc; text-decoration: underline; } .foot-link:hover { color: #fff; } /* pricing */ .plan { background: var(--card); color: var(--ink); border: 2px solid var(--line); border-radius: 20px; padding: 26px; position: relative; } .plan.best { border-color: var(--coral); } .plan.gold { border-color: var(--gold); } .plan .tag { position: absolute; top: -12px; right: 18px; background: var(--coral); color: #fff; font-size: .66rem; font-weight: 800; padding: 4px 12px; border-radius: 10px; letter-spacing: .06em; } .plan .tag.g { background: var(--gold); } .price { font-size: 2.4rem; font-weight: 700; } .annual { font-size: .85rem; color: var(--soft); margin: -2px 0 6px; } .annual b { color: var(--ink); } .price small { font-size: .95rem; color: var(--faint); font-weight: 400; margin-left: 4px; } .plan .ticks li { color: var(--soft); font-size: .92rem; } /* pricing: the not-yet-available membership card. Grayed accents only, never the body text, so every word stays readable. */ .plan.soon { border-color: var(--line); position: relative; } .plan.soon .price, .plan.soon .annual b { color: var(--faint); } .plan.soon .ticks li::before { color: var(--faint); } .plan .tag.gray { background: var(--faint); } .soon-note { font-size: .82rem; color: var(--soft); margin: 8px 0 2px; font-weight: 600; } .btn.block.disabled { background: var(--line); color: var(--soft); box-shadow: none; cursor: default; font-weight: 700; padding: 13px 26px; border-radius: 13px; text-align: center; display: block; margin-top: 16px; } /* closer + footer */ .closer { background: linear-gradient(160deg, var(--band) 0%, var(--band2) 100%); color: #edf1f7; } .closer h2 { color: #fff; } .closer .big { color: #c4cfdf; } /* Footer: everything centered on one axis. The OmniTaught mark leads, the family of products sits beneath it, disclaimers close. The mask url resolves against this stylesheet, so the glyph works from any page depth. */ footer { background: var(--footer-bg); color: #93a3bc; text-align: center; } /* Footer blocks reuse .wrap for width, not for its section-scale padding: the scoped rule outranks the large-screen .wrap overrides, so the footer keeps one compact rhythm at every size instead of 90px gaps between every block. */ footer .wrap { padding-top: 0; padding-bottom: 0; } footer .foot { padding-top: 44px; padding-bottom: 6px; } footer .fam { padding-top: 10px; padding-bottom: 26px; } footer .legal { padding-bottom: 10px; } footer .legal:last-child { padding-bottom: 32px; } .foot { display: flex; flex-direction: column; align-items: center; gap: 4px; } .flogo { font-size: 1.5rem; color: #fff; display: inline-flex; align-items: center; gap: 12px; } .flogo b { color: var(--coral); } .fhead { width: 30px; height: 33px; flex: 0 0 auto; background: #fff; -webkit-mask: url("img/head.png") center / contain no-repeat; mask: url("img/head.png") center / contain no-repeat; } .foot .micro { margin-top: 6px; } /* The OmniPsyche family */ .fam-h { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .76rem; color: #7c8ba3; margin-bottom: 18px; } .fam-row { display: flex; gap: 14px; justify-content: center; align-items: stretch; flex-wrap: wrap; } .fam-btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 14px; border-radius: 999px; text-decoration: none; border: 1px solid transparent; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .fam-btn:hover { transform: translateY(-2px); } .fam-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; } .fam-mark { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; } .fam-mark svg { width: 100%; height: 100%; } .fam-copy { display: flex; flex-direction: column; line-height: 1.25; text-align: left; } .fam-label { color: #fff; font-size: .95rem; letter-spacing: .01em; } .fam-label strong { font-weight: 700; letter-spacing: .06em; } .fam-sub { color: #aebbd1; font-size: .76rem; margin-top: 2px; max-width: 24em; } .fam-sub strong { color: #fff; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } /* Each product keeps its own accent: NOTICE coral, Health teal, .org neutral. */ .fb-notice { background: rgba(240,116,79,.12); border-color: rgba(240,116,79,.42); } .fb-notice:hover { background: rgba(240,116,79,.2); border-color: rgba(240,116,79,.7); } .fb-health { background: rgba(44,122,110,.18); border-color: rgba(44,122,110,.6); } .fb-health:hover { background: rgba(44,122,110,.3); border-color: rgba(63,160,145,.9); } .fb-org { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); } .fb-org:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.45); } .fb-org .fam-mark::before { content: ""; width: 24px; height: 27px; background: #fff; -webkit-mask: url("img/head.png") center / contain no-repeat; mask: url("img/head.png") center / contain no-repeat; } .legal { max-width: 76ch; text-align: center; } @media (max-width: 640px) { .fam-row { flex-direction: column; align-items: center; } .fam-btn { width: min(100%, 340px); } } /* Wish Library search box inside the dropdown */ .wl-search { width: 100%; margin: 10px 0 4px; padding: 9px 12px; border: 1px solid var(--line, #e6e0d6); border-radius: 8px; background: var(--bg, #fff); color: inherit; font: inherit; font-size: .95rem; } /* ========================================================================== Large screens: the page grows with the window instead of stranding the content in a 1080px column. Widths, type, and spacing scale together, and the reading measure stays comfortable (the lede and prose keep their em caps, so lines never run long). Matches the house breakpoints: 1500, 1920. ========================================================================== */ @media (min-width: 1500px) { .wrap { padding-block: 78px; } .wrap.narrow { max-width: 960px; } .hero-inner { max-width: 1380px; gap: 56px; padding-left: 32px; padding-right: 32px; } .grid { gap: 22px; } .grid.tiles { grid-template-columns: repeat(4, 1fr); } h2 { font-size: clamp(1.8rem, 2.6vw, 2.6rem); } h3 { font-size: 1.24rem; } .lede { font-size: 1.24rem; } .big { font-size: 1.24rem; } .sub { font-size: 1.06rem; } .tile b { font-size: 1.02rem; } .tile i { font-size: .84rem; } .feature { padding: 26px; } .feature p { font-size: .98rem; } } @media (min-width: 1920px) { .wrap { padding-block: 92px; } .wrap.narrow { max-width: 1080px; } .hero-inner { max-width: 1660px; gap: 72px; padding-left: 40px; padding-right: 40px; } .grid { gap: 26px; } .grid.tiles { grid-template-columns: repeat(5, 1fr); } .grid.four { gap: 26px; } h2 { font-size: clamp(2.1rem, 2.4vw, 3rem); } .lede { font-size: 1.32rem; max-width: 32em; } .big { font-size: 1.32rem; } .sub { font-size: 1.12rem; max-width: 46em; } .tile { padding: 18px 20px; } .tile span { width: 50px; height: 50px; } .tile b { font-size: 1.08rem; } .feature { padding: 30px; } .ficon { width: 52px; height: 52px; font-size: 1.35rem; } } @media (min-width: 2400px) { .hero-inner { max-width: 1900px; } .grid.tiles { grid-template-columns: repeat(6, 1fr); } }