/* --------------------------------------------------------------------------- fv-theme.css — Future Vision Computer Institute The house style for hand-built pages, taken from the home page. Nothing here is invented. The variable names, the colours, the sticky translucent header, the pale-blue alternating sections, the gradient panels and the pill buttons are all lifted from index.html so that a page written by hand sits beside the twenty bundled course pages without looking like it came from somewhere else. Fonts are the ones the site already self-hosts in /assets/prerendered/, so these pages load no third-party font and match the rest of the site exactly. Two families of page: .fv-page the default — Sora headings on navy .fv-page.fv-design the design-department variant, which keeps Anton for display headings the way the two graphic design course pages do Usage: ... or --------------------------------------------------------------------------- */ /* --- the site's own faces, already on the server ------------------------- */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/prerendered/153fc85b70298bee.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* names match index.html so the two files stay legible together */ --c-primary: #163d6d; --c-bright: #2a5fa0; --c-primary-soft: rgba(22,61,109,.12); --c-ink: #122f54; --c-body: #44546b; --c-muted: #7787a0; --c-tint: #e8f0fa; --c-tint2: #f4f8fd; --c-border: #dde6f2; --c-navy: #0f2747; --c-alert: #dc2626; --fv-grad: linear-gradient(135deg, var(--c-primary), var(--c-bright)); --fv-grad-deep: linear-gradient(150deg, #0f2747, #163d6d); --fv-font-head: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fv-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fv-font-display:'Anton', 'Sora', Impact, sans-serif; --fv-radius-card: 16px; --fv-radius-pill: 100px; --fv-radius-sm: 10px; --fv-wrap: 1200px; --fv-shadow: 0 1px 2px rgba(22,61,109,.06), 0 10px 30px -14px rgba(22,61,109,.18); } /* --- base ---------------------------------------------------------------- */ .fv-page { margin: 0; background: #fff; color: var(--c-body); font-family: var(--fv-font-body); font-size: 16.5px; line-height: 1.7; -webkit-font-smoothing: antialiased; } .fv-page * { box-sizing: border-box; } .fv-page h1, .fv-page h2, .fv-page h3, .fv-page h4 { font-family: var(--fv-font-head); color: var(--c-ink); line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; margin: 0; } .fv-page h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; letter-spacing: -.03em; } .fv-page h2 { font-size: clamp(1.4rem, 3.2vw, 1.95rem); margin: 0 0 16px; } .fv-page h3 { font-size: 1.15rem; margin: 26px 0 8px; } .fv-page p { margin: 0 0 16px; } .fv-page a { color: var(--c-primary); text-underline-offset: 2px; } .fv-page a:focus-visible, .fv-page button:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; } .fv-page.fv-design h1, .fv-page.fv-design h2 { font-family: var(--fv-font-display); font-weight: 400; letter-spacing: .002em; text-transform: uppercase; } /* --- sticky header, as on the home page ---------------------------------- */ .fv-head { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-border); } .fv-head-in { max-width: var(--fv-wrap); margin: 0 auto; padding: 13px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .fv-logo img { height: 46px; width: auto; display: block; } .fv-head nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .fv-head nav a { text-decoration: none; color: var(--c-body); font-family: var(--fv-font-head); font-weight: 600; font-size: 14.5px; } .fv-head nav a:hover, .fv-head nav a:focus { color: var(--c-primary); } .fv-head .fv-btn-sm { background: var(--fv-grad); color: #fff; padding: 9px 18px; border-radius: var(--fv-radius-pill); font-size: 14px; white-space: nowrap; } @media (max-width: 780px) { .fv-head nav a:not(.fv-btn-sm) { display: none; } } /* --- sections ------------------------------------------------------------ */ .fv-sec { padding: 58px 0; } .fv-sec.tint { background: var(--c-tint2); } .fv-in { max-width: var(--fv-wrap); margin: 0 auto; padding: 0 24px; } .fv-narrow { max-width: 760px; } .fv-eyebrow { font-family: var(--fv-font-head); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-primary); display: block; margin-bottom: 12px; } /* --- hero ---------------------------------------------------------------- */ .fv-hero { background: var(--fv-grad-deep); color: #fff; padding: 64px 0 60px; } .fv-hero h1 { color: #fff; } .fv-hero .fv-eyebrow { color: #9fb4e0; } .fv-hero .fv-dek { color: #dbe6f7; font-size: 1.15rem; max-width: 62ch; margin: 14px 0 0; } .fv-hero .fv-meta { color: #9fb4e0; border: 0; padding: 0; margin: 18px 0 0; } .fv-meta { font-family: var(--fv-font-head); font-size: 12.5px; color: var(--c-muted); } /* --- the direct-answer block -------------------------------------------- Guide pages open with the answer before the explanation. This is the passage an AI assistant quotes, so it is given the tint panel rather than being buried in running text. */ .fv-answer { background: var(--c-tint); border-left: 4px solid var(--c-primary); padding: 22px 26px; margin: 0 0 30px; border-radius: 0 var(--fv-radius-card) var(--fv-radius-card) 0; } .fv-answer p:last-child { margin-bottom: 0; } /* --- cards --------------------------------------------------------------- */ .fv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 0 0 24px; } .fv-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--fv-radius-card); padding: 22px 24px; box-shadow: var(--fv-shadow); } .fv-card h3 { margin-top: 0; } .fv-card p:last-child { margin-bottom: 0; } /* --- tables -------------------------------------------------------------- */ .fv-tw { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--c-border); border-radius: var(--fv-radius-card); background: #fff; } .fv-page table { border-collapse: collapse; width: 100%; font-family: var(--fv-font-head); font-size: 14.5px; min-width: 460px; } .fv-page th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--c-muted); background: var(--c-tint2); border-bottom: 1px solid var(--c-border); padding: 12px 18px; white-space: nowrap; } .fv-page td { padding: 13px 18px; border-bottom: 1px solid var(--c-border); vertical-align: top; line-height: 1.55; } .fv-page tbody tr:last-child td { border-bottom: none; } /* --- lists --------------------------------------------------------------- */ .fv-page ul, .fv-page ol { margin: 0 0 18px 22px; padding: 0; } .fv-page li { margin-bottom: 9px; } .fv-page li::marker { color: var(--c-primary); } /* --- call to action ------------------------------------------------------ */ .fv-cta { background: var(--fv-grad); color: #fff; border-radius: var(--fv-radius-card); padding: 34px 36px; margin: 44px 0; box-shadow: var(--fv-shadow); } .fv-cta h3 { color: #fff; margin-top: 0; font-size: 1.35rem; } .fv-cta p { color: #e4edfb; } .fv-cta p:last-of-type { margin-bottom: 0; } .fv-page a.fv-btn, .fv-btn { display: inline-block; background: #fff; color: var(--c-primary); text-decoration: none; font-family: var(--fv-font-head); font-size: 15px; font-weight: 700; padding: 13px 26px; border-radius: var(--fv-radius-pill); margin-top: 16px; } .fv-page a.fv-btn:hover, .fv-page a.fv-btn:focus, .fv-btn:hover, .fv-btn:focus { background: var(--c-tint); color: var(--c-ink); } .fv-page a.fv-btn-sm, .fv-btn-sm { display: inline-block; text-decoration: none; font-family: var(--fv-font-head); font-weight: 600; color: #fff; } .fv-page a.fv-btn-sm:hover, .fv-page a.fv-btn-sm:focus { color: #fff; opacity: .92; } /* --- faq ----------------------------------------------------------------- */ .fv-faq h3 { font-size: 1.05rem; margin: 0 0 8px; color: var(--c-ink); } .fv-faq > div { background: #fff; border: 1px solid var(--c-border); border-radius: var(--fv-radius-card); padding: 20px 24px; margin-bottom: 14px; } .fv-faq > div p:last-child { margin-bottom: 0; } /* --- branches ------------------------------------------------------------ */ .fv-branch { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin: 0 0 12px; } .fv-branch-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--fv-radius-card); padding: 20px 22px; } .fv-branch-card strong { display: block; font-family: var(--fv-font-head); color: var(--c-ink); font-size: 15px; margin-bottom: 6px; } .fv-branch-card p { font-size: 14.5px; margin: 0 0 10px; } .fv-branch-card a { font-family: var(--fv-font-head); font-size: 13.5px; font-weight: 600; text-decoration: none; } .fv-branch-card a:hover { text-decoration: underline; } /* --- footer -------------------------------------------------------------- */ .fv-foot { background: var(--c-navy); color: #b9c8dd; padding: 46px 0 34px; font-size: 14.5px; } .fv-foot .fv-in { max-width: var(--fv-wrap); } .fv-foot strong { color: #fff; font-family: var(--fv-font-head); } .fv-foot a { color: #cfe0f5; } .fv-foot a:hover, .fv-foot a:focus { color: #fff; } .fv-foot p { margin: 0 0 14px; } .fv-foot .fv-copy { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; margin: 26px 0 0; font-size: 13px; color: #8ea3bf; } /* --- accessibility -------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .fv-page *, .fv-page *::before, .fv-page *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }