/* BASE */ body { background-color: #080b09; color: #e6d7b8; overflow-x: hidden; font-family: 'Inter', sans-serif; } .hidden-forced { display: none !important; } .brand-font { font-weight: 800; letter-spacing: -0.03em; } .bg-gradient-pop { background-image: linear-gradient(to right, #f3f1e8, #f3b63f, #ffd87a); } /* NAVIGATION */ .nav-glass { background: rgba(5,7,6, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(243,241,232, 0.08); transition: all 0.3s ease; } .nav-btn { padding: 8px 24px; border-radius: 99px; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; transition: all 0.3s ease; border: 1px solid transparent; text-transform: uppercase; } .nav-btn-inactive { color: #a99f8a; } .nav-btn-inactive:hover { color: white; background: rgba(243,241,232, 0.05); } .nav-btn-active { color: #f3b63f; background: rgba(243,182,63, 0.1); border-color: rgba(243,182,63, 0.3); box-shadow: 0 0 20px rgba(243,182,63, 0.15); } /* ANIMATIONS */ .fade-in { animation: fadeIn 0.8s ease-out forwards; opacity: 0; transform: translateY(20px); } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } @keyframes drift { from { background-position: 0 0; } to { background-position: 1000px 0; } } .animate-drift { animation: drift 80s linear infinite; } .animate-pulse { will-change: auto; } /* --- RESTORED CARD SHUFFLE ANIMATION (GPU OPTIMIZED) --- */ /* The top card lifts, banks and is dealt off to the right, then returns to the back of the stack out of sight and climbs steadily back to the front. The previous version cut straight from "gone" to "at the back" in a tenth of a second, which read as a glitch rather than a shuffle. */ @keyframes deck-cycle { 0%, 26% { transform: translate3d(0,0,0) rotate(0deg) scale(1); opacity: 1; z-index: 3; } 33% { transform: translate3d(150px,-38px,0) rotate(13deg) scale(.95); opacity: 0; z-index: 3; } 34% { transform: translate3d(0,34px,0) rotate(-3deg) scale(.90); opacity: 0; z-index: 0; } 41%, 62% { transform: translate3d(0,22px,0) rotate(-2deg) scale(.93); opacity: .5; z-index: 1; } 70%, 92% { transform: translate3d(0,11px,0) rotate(-1deg) scale(.965); opacity: .8; z-index: 2; } 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); opacity: 1; z-index: 3; } } .deck-scene { position: relative; width: 250px; height: 300px; margin: 0 auto; contain: layout paint; } .deck-scene.is-idle .deck-card { animation-play-state: paused; } .deck-glow { position: absolute; inset: -50px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(243,182,63,.16), transparent 68%); } .deck-card { position: absolute; inset: 0; border-radius: 16px; padding: 20px; background: linear-gradient(160deg, #1b1b1b 0%, #0a0d0b 100%); border: 1px solid rgba(243,241,232,.10); box-shadow: 0 22px 46px rgba(0,0,0,.8), inset 0 1px 0 rgba(243,241,232,.06); animation: deck-cycle 7.5s infinite cubic-bezier(.16,.84,.44,1); will-change: transform, opacity; } /* Stagger Delays for the 3 cards */ .card-1 { animation-delay: 0s; } .card-2 { animation-delay: -2.5s; } .card-3 { animation-delay: -5s; } /* Each card carries its own seed and lights a DIFFERENT option, so the claim the section makes - that no two exams come out alike - is visible in the graphic instead of only being asserted in the copy beside it. */ .deck-chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .16em; color: #f3b63f; border: 1px solid rgba(243,182,63,.35); border-radius: 5px; padding: 3px 7px; } .deck-q { height: 7px; border-radius: 4px; background: rgba(243,241,232,.22); margin-bottom: 7px; } .deck-q.short { width: 62%; background: rgba(243,241,232,.12); } .deck-opt { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; border: 1px solid rgba(243,241,232,.10); background: rgba(0,0,0,.45); } .deck-opt i { display: block; height: 4px; border-radius: 2px; background: rgba(243,241,232,.22); } .deck-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(243,241,232,.28); flex-shrink: 0; } .deck-opt.on { border-color: #f3b63f; background: rgba(243,182,63,.12); box-shadow: 0 0 16px rgba(243,182,63,.22); } .deck-opt.on .deck-dot { border-color: #f3b63f; background: #f3b63f; box-shadow: 0 0 10px rgba(243,182,63,.8); } .deck-opt.on i { background: rgba(243,182,63,.75); } /* Premium Middle Card Style */ .shuffle-card-middle { background: linear-gradient(145deg, #141a16, #1f2823); border: 1px solid rgba(243,241,232, 0.05); transform: scale(0.95) translateY(10px); z-index: 2; box-shadow: 0 -4px 10px rgba(0,0,0,0.3); } /* Bottom Card Style */ .shuffle-card-bottom { background: #0a0d0b; border: 1px solid #111; transform: scale(0.9) translateY(20px); opacity: 0.5; z-index: 1; } /* Fake Text Lines (The Detail you liked) */ .fake-text-glow { height: 6px; background: rgba(243,241,232,0.1); border-radius: 3px; margin-bottom: 8px; box-shadow: 0 0 5px rgba(243,241,232,0.05); } /* HOLDING PATTERN */ @keyframes orbit-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .orbit-container { animation: orbit-rotate 8s linear infinite; } @keyframes beacon-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 15px #f3b63f; } } .beacon { animation: beacon-pulse 2s infinite ease-in-out; } /* COMPONENTS */ .glass-panel { background: rgba(15,22,18, 0.4); backdrop-filter: blur(12px); border: 1px solid rgba(243,241,232, 0.05); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s, box-shadow 0.4s, background-color 0.4s; transform: translate3d(0,0,0); backface-visibility: hidden; } .glass-panel:hover { border-color: rgba(243,182,63, 0.5); background: rgba(15,22,18, 0.6); box-shadow: 0 0 30px rgba(243,182,63, 0.1); transform: translateY(-5px) scale(1.02); } .stats-box { background: rgba(8,11,9, 0.6); backdrop-filter: blur(8px); border: 1px solid #2a3128; border-radius: 16px; padding: 2rem; transition: all 0.3s ease; } .stats-box:hover { border-color: #f3b63f; background: rgba(243,182,63, 0.05); box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 0 1px #f3b63f; transform: translateY(-5px); } .price-card-pop { position: relative; background: rgba(12,17,14, 0.8); border: 2px solid #f3b63f; box-shadow: 0 0 40px rgba(243,182,63, 0.1); transition: all 0.3s ease; } .price-card-pop:hover { box-shadow: 0 0 60px rgba(243,182,63, 0.25); transform: scale(1.05); } /* MISC ASSETS */ .input-tech { background-color: #000000 !important; border: 1px solid #2a3128 !important; color: #f3b63f !important; font-family: monospace; font-size: 1.1rem; letter-spacing: 0.15em; transition: all 0.3s; text-transform: uppercase; text-align: center; } .input-tech:focus { border-color: #f3b63f !important; box-shadow: 0 0 15px rgba(243,182,63, 0.3) !important; outline: none; } .input-tech::placeholder { color: #374151 !important; } .star { animation: twinkle 4s infinite ease-in-out; } @keyframes twinkle { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 0.2; transform: scale(0.8); } } .runway-light { width: 6px; height: 6px; background-color: #f3b63f; border-radius: 50%; box-shadow: 0 0 8px #f3b63f; margin: 20px 0; animation: pulse-green 1.5s infinite ease-in-out; } .threshold-stripe { width: 30px; height: 100px; background-color: rgba(243,241,232,0.85); display: inline-block; margin: 0 10px; box-shadow: 0 0 20px rgba(243,241,232,0.15); border-radius: 2px; } /* PLANE & TRAIL */ .plane-flyby { position: absolute; opacity: 0; pointer-events: none; z-index: 1; transition: opacity 0.5s; } .contrail { position: absolute; right: 15px; top: 50%; width: 200px; height: 2px; background: linear-gradient(to left, rgba(243,182,63, 0.5), transparent); transform: translateY(-50%); filter: blur(3px); z-index: -1; } /* BACKGROUNDS */ .bg-sky { background: radial-gradient(circle at center, #141a16 0%, #080b09 100%); position: relative; overflow: hidden; } .bg-clouds-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("data:image/svg+xml,%3Csvg width='256' height='128' viewBox='0 0 256 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 80 A 20 20 0 0 1 25 40 A 30 30 0 0 1 75 40 A 30 30 0 0 1 125 40 A 20 20 0 0 1 125 80 Z' fill='%2392e07e' fill-opacity='0.08'/%3E%3Cpath d='M150 100 A 25 25 0 0 1 150 50 A 35 35 0 0 1 210 50 A 25 25 0 0 1 210 100 Z' fill='%2392e07e' fill-opacity='0.06'/%3E%3C/svg%3E"); background-size: 512px 256px; opacity: 0.6; } .bg-mountains-layered { background: linear-gradient(180deg, rgba(8,11,9,.55) 0%, rgba(8,11,9,.82) 40%, rgba(8,11,9,.92) 100%); } /* MINECRAFT CHUNK LOADING (OCCLUSION CULLING) */ .render-chunk { content-visibility: auto; contain-intrinsic-size: 800px; } .render-chunk-large { content-visibility: auto; contain-intrinsic-size: 1500px; } /* ========================================================================= INTERACTION LAYER Purely additive. Nothing here changes the page's layout or content - it is driven by data-attributes so the renderers stay readable, and every effect degrades to "just visible" if JS never runs or the visitor has asked for reduced motion. ========================================================================= */ /* ---- Scroll reveal. Sections start displaced and settle as they enter view, which is what makes a long page feel authored. ---- */ [data-reveal] { opacity: 0; will-change: transform, opacity; transition: opacity .9s cubic-bezier(.16,.84,.44,1), transform .9s cubic-bezier(.16,.84,.44,1); } [data-reveal="up"] { transform: translateY(42px); } [data-reveal="down"] { transform: translateY(-32px); } [data-reveal="left"] { transform: translateX(-48px); } [data-reveal="right"] { transform: translateX(48px); } [data-reveal="scale"] { transform: scale(.94); } [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; } /* ---- Headline word-by-word entrance ---- */ .word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; } .word { display: inline-block; transform: translateY(110%); opacity: 0; transition: transform .95s cubic-bezier(.16,.84,.44,1), opacity .7s ease; } .is-in .word, .word.is-in { transform: translateY(0); opacity: 1; } /* ---- Reading-progress hairline under the nav ---- */ #scroll-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0%; background: linear-gradient(90deg, #c98232, #f3b63f, #ffd87a); box-shadow: 0 0 12px rgba(243,182,63,.7); transition: width .12s linear; z-index: 60; } nav.is-stuck { box-shadow: 0 10px 40px rgba(0,0,0,.7); } nav.is-stuck .nav-inner { height: 64px; } .nav-inner { transition: height .35s cubic-bezier(.16,.84,.44,1); } /* ---- Card tilt + cursor glow ---- */ [data-tilt] { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.16,.84,.44,1); } [data-tilt].is-tilting { transition: transform .1s linear; } .cursor-glow { position: absolute; width: 340px; height: 340px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(243,182,63,.16), transparent 68%); opacity: 0; transition: opacity .4s ease; z-index: 0; } [data-tilt]:hover .cursor-glow { opacity: 1; } /* ---- Buttons: sheen sweep + press ---- */ .btn-sheen { position: relative; overflow: hidden; } .btn-sheen::before { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(243,241,232,.38), transparent); transform: skewX(-18deg); transition: left .75s cubic-bezier(.16,.84,.44,1); } .btn-sheen:hover::before { left: 130%; } .btn-sheen:active { transform: translateY(1px) scale(.985); } /* ---- Bundles. The unit price is the number that actually sells a pack, so it gets its own line rather than being buried in the copy. ---- */ /* ---- Exam centre: two licence cards, one lit ---- */ .tier-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 14px; justify-content: center; } .tier-card { position: relative; text-align: left; padding: 22px 24px 20px; border-radius: 20px; cursor: pointer; border: 1px solid rgba(243,241,232,.09); background: linear-gradient(168deg, rgba(13,30,23,.7), rgba(8,11,9,.92)); display: flex; flex-direction: column; gap: 2px; color: #a99f8a; transition: border-color .25s, background .25s, transform .25s, box-shadow .25s; } .tier-card:hover { transform: translateY(-3px); border-color: rgba(243,182,63,.4); } .tier-card-k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #7c745f; transition: color .25s; padding-right: 34px; /* clear of the tick */ } .tier-card b { font-size: 2.4rem; font-weight: 900; letter-spacing: -.05em; line-height: 1.05; color: #f3f1e8; margin: 4px 0 6px; transition: color .25s; } .tier-card-m { font-size: .84rem; color: #a99f8a; } .tier-card-p { margin-top: 10px; font-size: .8rem; color: #7c745f; } .tier-card-p em { font-style: normal; font-weight: 800; color: #e6d7b8; } .tier-card-on { position: absolute; top: 18px; right: 18px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #080b09; background: #f3b63f; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s cubic-bezier(.16,.84,.44,1); } .tier-card-on svg { width: 13px; height: 13px; } .tier-card.is-on { border-color: rgba(243,182,63,.75); background: linear-gradient(168deg, rgba(243,182,63,.13), rgba(8,11,9,.95)); box-shadow: 0 20px 50px -20px rgba(243,182,63,.45), inset 0 1px 0 rgba(243,182,63,.25); } .tier-card.is-on .tier-card-k { color: #f3b63f; } .tier-card.is-on b { color: #f3b63f; } .tier-card.is-on .tier-card-p em { color: #f3f1e8; } .tier-card.is-on .tier-card-on { opacity: 1; transform: scale(1); } @media (max-width: 640px) { .tier-pick { grid-template-columns: 1fr 1fr; gap: 10px; } .tier-card { padding: 16px 16px 14px; } .tier-card b { font-size: 1.9rem; } .tier-card-m { font-size: .74rem; } } .tier-note { margin: 22px auto 0; max-width: 60ch; padding: 0 24px; text-align: center; color: #7c745f; font-size: .8rem; line-height: 1.6; } .bundle { position: relative; border-radius: 26px; padding: 34px 30px; overflow: hidden; background: linear-gradient(180deg, rgba(14,20,16,.95) 0%, rgba(8,11,9,.96) 100%); border: 1px solid rgba(243,241,232,.08); display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.16,.84,.44,1), border-color .45s ease, box-shadow .45s ease; } .bundle::before { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(243,241,232,.32), transparent); } .bundle:hover { transform: translateY(-7px); border-color: rgba(243,182,63,.45); box-shadow: 0 30px 70px rgba(0,0,0,.7), 0 0 44px rgba(243,182,63,.1); } .bundle-best { padding-top: 62px; border-color: rgba(243,182,63,.85); background: linear-gradient(180deg, rgba(11,37,29,.97) 0%, rgba(8,11,9,.97) 100%); box-shadow: 0 30px 70px rgba(0,0,0,.75), 0 0 60px rgba(243,182,63,.14); } .bundle-best::before { background: linear-gradient(90deg, transparent, #f3b63f, transparent); box-shadow: 0 0 18px rgba(243,182,63,.9); } .bundle-best:hover { box-shadow: 0 36px 80px rgba(0,0,0,.8), 0 0 80px rgba(243,182,63,.22); } .bundle-ribbon { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); background: #f3b63f; color: #0a0d0b; font-size: 10px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; padding: 5px 16px; border-radius: 99px; box-shadow: 0 6px 20px rgba(243,182,63,.45); white-space: nowrap; } .bundle-name { font-size: 10px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: #7c745f; } .bundle-best .bundle-name { color: #f3b63f; } .bundle-qty { font-weight: 900; letter-spacing: -.04em; color: #f3f1e8; line-height: 1; font-size: 3rem; margin-top: 6px; } .bundle-qty span { font-size: .9rem; font-weight: 700; color: #7c745f; letter-spacing: 0; margin-left: 6px; } /* CPL bundles carry a two-part qualifier; keep it on its own line under the number */ .bundle-qty em { display: block; margin-top: 8px; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f3b63f; } .bundle-save { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .14em; padding: 3px 9px; border-radius: 6px; color: #f3b63f; background: rgba(243,182,63,.1); border: 1px solid rgba(243,182,63,.3); } /* The unit price is the hero number - it is what makes packs comparable at a glance. */ .bundle-per { margin: 26px 0 22px; padding: 16px 0; text-align: center; border-top: 1px solid rgba(243,241,232,.07); border-bottom: 1px solid rgba(243,241,232,.07); } .bundle-per b { display: block; font-size: 2.1rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; background: linear-gradient(180deg, #f3f1e8, #b9ae93); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .bundle-best .bundle-per b { background-image: linear-gradient(180deg, #f3f1e8, #f3b63f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .bundle-per i { display: block; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #7c745f; margin-top: 7px; } .bundle-total { display: flex; align-items: baseline; justify-content: flex-end; gap: 9px; } .bundle-total s { font-size: .8rem; color: #574f41; text-decoration-color: rgba(239,68,68,.7); } .bundle-total b { font-size: 1.65rem; font-weight: 900; color: #f3f1e8; letter-spacing: -.02em; } .bundle-best .bundle-total b { font-size: 2rem; } .bundle-feat { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; } .bundle-feat span { display: flex; align-items: center; gap: 11px; font-size: .875rem; color: #e6d7b8; } .bundle-feat i { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; position: relative; background: rgba(243,182,63,.12); border: 1px solid rgba(243,182,63,.3); } .bundle-feat i::after { content: ''; position: absolute; left: 6px; top: 2.5px; width: 4px; height: 8px; border: solid #f3b63f; border-width: 0 2px 2px 0; transform: rotate(45deg); } .bundle-cta { margin-top: auto; width: 100%; padding: 16px; border-radius: 14px; font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; border: 1px solid rgba(243,241,232,.12); background: rgba(243,241,232,.05); color: #e6d7b8; transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease; } .bundle-cta:hover { background: #f3f1e8; color: #0a0d0b; border-color: #f3f1e8; transform: translateY(-2px); } .bundle-cta-best { background: #f3b63f; color: #0a0d0b; border-color: #f3b63f; font-weight: 900; box-shadow: 0 10px 30px rgba(243,182,63,.28); } .bundle-cta-best:hover { background: #f3f1e8; border-color: #f3f1e8; box-shadow: 0 14px 40px rgba(243,182,63,.45); } /* ---- Reviews. A featured quote carrying the strongest line, with the rest arranged around it - hierarchy the old five-identical-cards carousel could not give, and no scroll buttons to discover. ---- */ /* Two lead quotes over three supporting ones, on a 6-column track. The spans are chosen so every row fills completely at every breakpoint - 2+3 on desktop, 2+2+1(full width) on tablet, stacked on mobile - so there is never a ragged hole where a card ran out. A masonry column-count layout balanced 5 items as 2/2/1 and left exactly that. */ .rev { position: relative; overflow: hidden; border-radius: 22px; padding: 28px; display: flex; flex-direction: column; background: linear-gradient(165deg, rgba(14,20,16,.92) 0%, rgba(11,11,11,.92) 100%); border: 1px solid rgba(243,241,232,.07); transition: transform .5s cubic-bezier(.16,.84,.44,1), border-color .45s ease, box-shadow .45s ease; } .rev:hover { transform: translateY(-5px); border-color: rgba(243,182,63,.4); box-shadow: 0 26px 60px rgba(0,0,0,.65), 0 0 40px rgba(243,182,63,.08); } .rev::before { content: '\201C'; position: absolute; top: -30px; right: 10px; font-size: 150px; line-height: 1; font-weight: 900; color: rgba(243,182,63,.07); pointer-events: none; transition: color .5s ease; } .rev:hover::before { color: rgba(243,182,63,.13); } .rev-stars { display: flex; gap: 3px; color: #f3b63f; margin-bottom: 18px; } .rev-stars svg { width: 14px; height: 14px; filter: drop-shadow(0 0 5px rgba(243,182,63,.5)); } .rev-body { position: relative; z-index: 1; color: #e6d7b8; font-size: .95rem; line-height: 1.7; margin-bottom: 22px; } .rev-foot { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(243,241,232,.07); } .rev-av { width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; color: #f3b63f; background: rgba(243,182,63,.09); border: 1px solid rgba(243,182,63,.25); } .rev-who { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #f3f1e8; } .rev-sub { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #7c745f; margin-top: 2px; } /* The featured one carries more weight: bigger type and a lit edge. */ .rev-lead { background: linear-gradient(165deg, rgba(11,37,29,.95) 0%, rgba(8,11,9,.95) 100%); border-color: rgba(243,182,63,.3); padding: 32px 30px; } .rev-lead::after { content: ''; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #f3b63f, rgba(243,182,63,0)); box-shadow: 0 0 16px rgba(243,182,63,.6); } .rev-lead .rev-body { font-size: 1.1rem; line-height: 1.62; color: #f3f1e8; font-weight: 500; } .rev-lead .rev-stars svg { width: 17px; height: 17px; } /* ---- Backdrop. A uniform 40px grid tiled edge to edge read as generic "tech wallpaper" and fought the ridgeline behind it. A major/minor chart grid that fades out down the page sits closer to a sectional and lets the mountains come through. ---- */ .chart-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(243,182,63,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(243,182,63,.05) 1px, transparent 1px), linear-gradient(rgba(243,182,63,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(243,182,63,.022) 1px, transparent 1px); background-size: 168px 168px, 168px 168px, 42px 42px, 42px 42px; -webkit-mask-image: radial-gradient(130% 78% at 50% 0%, #000 0%, rgba(0,0,0,.5) 42%, transparent 82%); mask-image: radial-gradient(130% 78% at 50% 0%, #000 0%, rgba(0,0,0,.5) 42%, transparent 82%); } /* ---- Panels that hold a running animation opt out of the backdrop blur. Compositing a blurred backdrop underneath something that repaints every frame is the single most expensive thing the page can do, and at 92% opacity the blur was never visible anyway. ---- */ .panel-solid { background: rgba(8,11,9,.92) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ---- Stat band. Hairline dividers instead of floating boxes, so the three figures read as one instrument panel rather than three dull cards. ---- */ .stat-cell { position: relative; overflow: hidden; background: #0d1210; transition: background .5s ease; } .stat-cell:hover { background: #101612; } .stat-cell::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; transform: translateX(-50%); border-radius: 2px; background: linear-gradient(90deg, transparent, #f3b63f, transparent); box-shadow: 0 0 14px rgba(243,182,63,.8); transition: width .55s cubic-bezier(.16,.84,.44,1); } .stat-cell:hover::after { width: 72%; } .stat-figure { font-weight: 900; font-size: clamp(2.6rem, 5.5vw, 3.9rem); line-height: 1; letter-spacing: -.045em; background: linear-gradient(180deg, #f3f1e8 0%, #b9ae93 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat-figure .u { -webkit-text-fill-color: #f3b63f; font-size: .5em; margin-left: .08em; vertical-align: .42em; letter-spacing: 0; } .stat-rule { width: 34px; height: 2px; margin: 20px auto 14px; border-radius: 2px; background: rgba(243,241,232,.14); transition: width .5s ease, background .5s ease, box-shadow .5s ease; } .stat-cell:hover .stat-rule { width: 66px; background: #f3b63f; box-shadow: 0 0 12px rgba(243,182,63,.7); } .stat-cap { font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #a99f8a; transition: color .4s ease; } .stat-cell:hover .stat-cap { color: #f3f1e8; } /* ---- Scroll cue ---- */ @keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } } .scroll-cue .cue-arrow { display: block; animation: cue 2.2s ease-in-out infinite; } /* ---- Exam interface niceties ---- */ .opt-row:hover { transform: translateX(6px); } /* ---- Film grain, very light, to stop the flat blacks banding ---- */ .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: #080b09; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #f3b63f, #c98232); border-radius: 8px; border: 3px solid #080b09; } ::-webkit-scrollbar-thumb:hover { background: #ffd87a; } /* ========================================================================= THE RANGES Hero scenery only. Three ranges at different parallax rates for depth, with the snow line as its own layer so it can catch the alpenglow. ========================================================================= */ .hero-range { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; width: 100%; will-change: transform; } .hero-range.far { height: 33vh; min-height: 220px; z-index: 2; } .hero-range.near { height: 17vh; min-height: 125px; z-index: 3; } .hero-scrim { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(72% 56% at 50% 45%, rgba(5,7,6,.66) 0%, rgba(5,7,6,.34) 52%, rgba(5,7,6,0) 82%); } .range-rim-glow { fill: #cfdcd8; opacity: .38; filter: drop-shadow(0 0 9px rgba(243,182,63,.4)); } /* Alpenglow sitting on the ridge line, plus the cold glow above it */ .range-glow { position: absolute; left: 50%; bottom: 2%; width: 96%; max-width: 1200px; height: 26vh; transform: translateX(-50%); pointer-events: none; z-index: 1; background: radial-gradient(58% 78% at 50% 100%, rgba(201,130,50,.13) 0%, transparent 66%), radial-gradient(72% 62% at 50% 100%, rgba(243,182,63,.10) 0%, transparent 62%); filter: blur(26px); } /* Snow lifting off the tops */ @keyframes mote { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: .8; } 88% { opacity: .5; } 100% { transform: translateY(-58vh) translateX(var(--dx)); opacity: 0; } } .mote { position: absolute; bottom: -10px; width: 2px; height: 2px; border-radius: 50%; background: rgba(243,241,232,.9); box-shadow: 0 0 6px rgba(243,182,63,.7); pointer-events: none; z-index: 3; animation: mote linear infinite; } /* ---- A roo bounds along the ridge line, every now and then ---- */ @keyframes roo-hop { 0%,100% { transform: translateY(0) rotate(4deg); } 45% { transform: translateY(-22px) rotate(-8deg); } 60% { transform: translateY(-18px) rotate(-6deg); } } .roo-runner { position: absolute; bottom: 5%; left: -220px; width: 96px; opacity: 0; z-index: 4; pointer-events: none; filter: brightness(.12) drop-shadow(0 6px 10px rgba(0,0,0,.6)); } .roo-runner .hop { animation: roo-hop .62s ease-in-out infinite; display: block; } .roo-runner img { display: block; width: 100%; height: auto; } /* ---- Respect the setting. Nothing here moves if the visitor opted out. ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .word { transform: none !important; opacity: 1 !important; } .roo-runner, .grain, .mote, .hero-plane { display: none !important; } } /* ===================================================================== HOME PAGE, SECOND HALF. The hero is untouched; everything under it now tells one story - what a code buys, try a question, pick a licence, proof, the engine, the free exam, questions. Same green, same rounded glass, borrowed structure. ===================================================================== */ /* ---- The Alps, faintly, behind everything below the hero ---- */ .ranges-fixed { position: fixed; left: 0; right: 0; bottom: 0; height: 44vh; z-index: -1; pointer-events: none; opacity: .55; } .ranges-fixed svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; } .ranges-fixed .far { fill: #0f1611; } .ranges-fixed .near { fill: #0a0f0c; } .ranges-fixed .snow { fill: rgba(230,215,184,.10); } .ranges-fixed .rim { fill: none; stroke: rgba(243,182,63,.14); stroke-width: 1.2; } .ranges-fixed::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #080b09 0%, transparent 34%); } .band { position: relative; padding: 96px 0; } .band-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .band-kick { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; color: #f3b63f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; } .band-kick::before { content: ''; width: 16px; height: 1px; background: currentColor; } .band h2 { font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: #f3f1e8; font-size: clamp(2rem, 4.2vw, 3.2rem); } .band h2 em { font-style: normal; color: #f3b63f; } .band-sub { margin-top: 16px; color: #a99f8a; font-size: 1.05rem; line-height: 1.65; max-width: 56ch; } .band-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(243,182,63,.45), transparent); } /* ---- Under the hero: what one code includes ---- */ .inc-band { background: rgba(11,12,11,.72); border-top: 1px solid rgba(243,241,232,.05); border-bottom: 1px solid rgba(243,241,232,.05); padding: 72px 0 80px; } .inc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: 24px; margin-bottom: 26px; border-bottom: 1px solid rgba(243,241,232,.08); } .inc-price { flex-shrink: 0; text-align: right; } .inc-price b { display: block; font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 900; letter-spacing: -.04em; color: #f3b63f; line-height: .95; } .inc-price b small { font-size: .5em; color: #7c745f; font-weight: 700; letter-spacing: 0; margin-right: 6px; } .inc-price span { display: block; margin-top: 8px; color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } .inc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .inc-grid.inc-four { grid-template-columns: repeat(4, 1fr); } /* About page: four reasons, not five inclusions */ .inc { position: relative; overflow: hidden; padding: 26px 22px 24px; border-radius: 18px; border: 1px solid rgba(243,241,232,.07); background: linear-gradient(168deg, rgba(13,30,23,.7), rgba(8,11,9,.9)); transition: border-color .2s ease, transform .2s ease, background .2s ease; } .inc[data-reveal] { transition-duration: .5s, .42s; } .inc:hover { border-color: rgba(243,182,63,.5); transform: translateY(-3px); } .inc-n { position: absolute; top: 18px; right: 18px; z-index: 2; color: rgba(243,241,232,.22); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .16px; transition: color .2s ease; } .inc:hover .inc-n { color: #f3b63f; } .inc-mark { position: relative; z-index: 1; display: block; width: fit-content; height: 78px; margin-bottom: 22px; color: #f3b63f; background: radial-gradient(62% 72% at 50% 52%, rgba(243,182,63,.16), transparent 72%); } .inc-mark svg { width: auto; height: 100%; display: block; overflow: visible; } .inc b { position: relative; z-index: 1; display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #f3f1e8; margin-bottom: 8px; } .inc p { position: relative; z-index: 1; font-size: .84rem; line-height: 1.5; color: #a99f8a; } .inc::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: #f3b63f; transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s cubic-bezier(.16,.84,.44,1); } .inc:hover::after { transform: scaleX(1); } /* ---- Try one: the live sample question ---- */ .sq-band { padding: 100px 0; } .sq-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; } .sq-tiers { display: inline-flex; gap: 4px; padding: 4px; margin-top: 26px; border-radius: 12px; background: rgba(243,241,232,.04); border: 1px solid rgba(243,241,232,.08); } .sq-tier { padding: 8px 16px; border-radius: 9px; border: 0; background: none; color: #a99f8a; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; } .sq-tier.is-on { background: #f3b63f; color: #080b09; } .sq { border-radius: 22px; overflow: hidden; border: 1px solid rgba(243,182,63,.2); background: linear-gradient(168deg, rgba(12,26,20,.96), rgba(8,11,9,.98)); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); } .sq-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid rgba(243,182,63,.16); background: rgba(243,182,63,.05); } .sq-ref, .sq-of { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .sq-ref { color: #f3b63f; } .sq-of { color: #7c745f; } .sq-body { padding: 30px 26px 26px; } .sq-q { font-size: 1.18rem; line-height: 1.5; font-weight: 600; color: #f3f1e8; margin-bottom: 24px; } .sq-opts { display: flex; flex-direction: column; gap: 10px; } .sq-opt { display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(243,241,232,.09); background: rgba(243,241,232,.03); color: #e6d7b8; font-size: .95rem; line-height: 1.45; cursor: pointer; transition: border-color .2s, background .2s, transform .2s, opacity .3s; } .sq-opt:hover:not(.locked) { border-color: rgba(243,182,63,.55); background: rgba(243,182,63,.05); transform: translateX(4px); } .sq-opt .k { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(243,241,232,.14); color: #a99f8a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 800; } .sq-opt.right { border-color: #f3b63f; background: rgba(243,182,63,.1); color: #f3f1e8; } .sq-opt.right .k { background: #f3b63f; border-color: #f3b63f; color: #080b09; } .sq-opt.wrong { border-color: #ef4444; background: rgba(239,68,68,.09); } .sq-opt.wrong .k { background: #ef4444; border-color: #ef4444; color: #2b0606; } .sq-opt.locked { cursor: default; } .sq-opt.dim { opacity: .4; } .sq-why { display: none; margin-top: 22px; border-left: 2px solid #f3b63f; padding: 18px 20px; border-radius: 0 14px 14px 0; background: rgba(243,182,63,.05); } .sq-why.show { display: block; animation: sq-open .45s cubic-bezier(.16,.84,.44,1) both; } @keyframes sq-open { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .sq-why h4 { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #f3b63f; margin-bottom: 8px; } .sq-why p { color: #e6d7b8; font-size: .92rem; line-height: 1.65; } .sq-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 22px; } .sq-next { padding: 11px 20px; border-radius: 10px; border: 1px solid rgba(243,182,63,.4); background: none; color: #f3b63f; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; } .sq-next:hover { background: #f3b63f; color: #080b09; } .sq-hint { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #7c745f; } /* ---- Two licences, one price to beat ---- */ .lic-band { padding: 100px 0; } .lic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; } .lic { position: relative; overflow: hidden; border-radius: 24px; padding: 34px 32px 30px; border: 1px solid rgba(243,241,232,.08); background: linear-gradient(168deg, rgba(13,30,23,.78), rgba(8,11,9,.94)); transition: border-color .3s, transform .3s, box-shadow .3s; } .lic:hover { border-color: rgba(243,182,63,.45); transform: translateY(-4px); box-shadow: 0 30px 70px -30px rgba(243,182,63,.25); } .lic-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; } .lic-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: #f3b63f; } .lic-new { display: inline-block; padding: 4px 9px; border-radius: 99px; background: #f3b63f; color: #080b09; font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; } .lic h3 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; color: #f3f1e8; line-height: 1.1; } .lic-sub { margin-top: 8px; color: #a99f8a; font-size: .92rem; line-height: 1.55; } .lic-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0 22px; } .lic-cmp > div { padding: 18px 18px 16px; border-radius: 16px; border: 1px solid rgba(243,241,232,.07); background: rgba(0,0,0,.28); } .lic-cmp > div.us { border-color: rgba(243,182,63,.35); background: rgba(243,182,63,.06); } .lic-cmp small { display: block; margin-bottom: 8px; color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } .lic-cmp b { display: block; font-size: 2.1rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: #7c745f; } .lic-cmp .us b { color: #f3b63f; } .lic-cmp b s { color: #574f41; text-decoration-color: rgba(239,68,68,.6); text-decoration-thickness: 3px; } .lic-cmp i { display: block; margin-top: 6px; font-style: normal; font-size: .76rem; color: #7c745f; } .lic-feats { display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; } .lic-feats span { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: #e6d7b8; } .lic-feats span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #f3b63f; flex-shrink: 0; box-shadow: 0 0 8px rgba(243,182,63,.6); } .lic-cta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .lic-btn { padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: all .25s; } .lic-btn-p { background: #f3b63f; color: #080b09; box-shadow: 0 10px 28px rgba(243,182,63,.22); } .lic-btn-p:hover { background: #f3f1e8; transform: translateY(-1px); } .lic-btn-g { border-color: rgba(243,241,232,.14); color: #a99f8a; } .lic-btn-g:hover { color: #f3f1e8; border-color: rgba(243,241,232,.35); } .lic-from { margin-left: auto; color: #7c745f; font-size: .78rem; } .lic-from b { color: #f3f1e8; } /* ---- Feature panels: bigger, left-anchored, one visual each ---- */ .feat-panel { transform: none !important; } .feat-panel:hover { box-shadow: 0 30px 80px -30px rgba(243,182,63,.18); } .feat-h { font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: #f3f1e8; font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin: 4px 0 18px; } .feat-p { color: #e6d7b8; font-size: 1.08rem; line-height: 1.65; } .feat-p2 { margin-top: 14px; color: #a99f8a; font-size: .98rem; line-height: 1.6; } .deck-wrap { transform: scale(1.18); transform-origin: 50% 50%; } @media (max-width: 767px) { .deck-wrap { transform: none; } } /* The report, each region lit in turn on one shared loop */ .kd { position: relative; border: 1px solid rgba(243,182,63,.18); border-radius: 18px; background: linear-gradient(170deg, rgba(12,22,17,.98), rgba(8,11,9,.99)); padding: 26px; box-shadow: 0 30px 70px rgba(0,0,0,.6); } .kd-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid rgba(243,241,232,.08); padding-bottom: 14px; margin-bottom: 18px; } .kd-brand, .kd-date { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; } .kd-brand { color: #7c745f; } .kd-date { color: #f3b63f; flex-shrink: 0; } @keyframes kd-focus { 0%, 3% { box-shadow: inset 0 0 0 1px rgba(243,182,63,0); background: transparent; } 6%, 17% { box-shadow: inset 0 0 0 1px rgba(243,182,63,.8), 0 0 30px rgba(243,182,63,.14); background: rgba(243,182,63,.06); } 23%, 100% { box-shadow: inset 0 0 0 1px rgba(243,182,63,0); background: transparent; } } @keyframes kd-tag { 0%, 4% { opacity: 0; transform: translateY(4px); } 8%, 17% { opacity: 1; transform: none; } 22%, 100% { opacity: 0; transform: translateY(4px); } } .kd-part { position: relative; border-radius: 12px; padding: 13px; margin: 0 -13px; animation: kd-focus 15s var(--d) infinite; } .kd-tag { position: absolute; top: -9px; right: 10px; padding: 3px 9px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #080b09; background: #f3b63f; opacity: 0; animation: kd-tag 15s var(--d) infinite; white-space: nowrap; } .kd-scene.is-idle .kd-part, .kd-scene.is-idle .kd-tag { animation-play-state: paused; } .kd-score { display: flex; align-items: baseline; gap: 14px; } .kd-score b { font-size: 2.6rem; font-weight: 900; letter-spacing: -.04em; color: #f3b63f; line-height: 1; text-shadow: 0 0 22px rgba(243,182,63,.4); } .kd-score span { font-size: .8rem; color: #7c745f; } .kd-q { font-size: .95rem; line-height: 1.5; color: #f3f1e8; font-weight: 600; } .kd-ans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .kd-ans > div { padding: 10px 12px; border-radius: 10px; font-size: .8rem; line-height: 1.4; } .kd-ans .bad { border: 1px solid rgba(239,68,68,.4); background: rgba(239,68,68,.08); color: #e6d7b8; } .kd-ans .good { border: 1px solid rgba(243,182,63,.45); background: rgba(243,182,63,.08); color: #f3f1e8; } .kd-ans u { display: block; text-decoration: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 5px; } .kd-ans .bad u { color: #ef4444; } .kd-ans .good u { color: #f3b63f; } .kd-why { font-size: .86rem; line-height: 1.65; color: #a99f8a; } .kd-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #f3b63f; } @media (max-width: 560px) { .kd-ans { grid-template-columns: 1fr; } .kd { padding: 20px; } } /* ---- Finale: the row of alternatives under the two buttons ---- */ .fin-alts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin-top: 30px; color: #7c745f; font-size: .8rem; } .fin-alts button { background: none; border: 0; padding: 4px 2px; color: #a99f8a; cursor: pointer; font-size: .8rem; transition: color .2s; } .fin-alts button b { color: #f3f1e8; font-weight: 700; } .fin-alts button:hover, .fin-alts button:hover b { color: #f3b63f; } .fin-alts > span { width: 3px; height: 3px; border-radius: 50%; background: rgba(243,241,232,.25); } .fin-alts .fin-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243,182,63,.5); } @media (max-width: 640px) { .fin-alts > span { display: none; } .fin-alts { flex-direction: column; gap: 4px; } } /* ---- The free exam vs a paid one ---- */ .cmp-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; } .cmp { border-radius: 20px; overflow: hidden; border: 1px solid rgba(243,241,232,.08); background: linear-gradient(168deg, rgba(12,26,20,.9), rgba(8,11,9,.96)); } .cmp-head, .cmp-row { display: grid; grid-template-columns: 1fr 120px 120px; align-items: center; } .cmp-head { padding: 14px 22px; border-bottom: 1px solid rgba(243,182,63,.2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #7c745f; } .cmp-free { color: #f3b63f !important; } .cmp-row { padding: 14px 22px; border-bottom: 1px solid rgba(243,241,232,.06); transition: background .25s; } .cmp-row:last-child { border-bottom: 0; } .cmp-row:hover { background: rgba(243,182,63,.04); } .cmp-l { font-size: .9rem; color: #a99f8a; } .cmp-c { text-align: center; } .cmp-diff { background: rgba(243,182,63,.05); } .cmp-diff .cmp-l { color: #f3f1e8; font-weight: 600; } .cmp-c b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92rem; font-weight: 800; color: #f3f1e8; } .cmp-c:nth-of-type(2) b { color: #f3b63f; } .cmp-y { display: inline-block; width: 7px; height: 13px; border: solid rgba(243,182,63,.9); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); } .cmp-x { display: inline-block; position: relative; width: 12px; height: 12px; } .cmp-x::before, .cmp-x::after { content: ''; position: absolute; left: 0; top: 5px; width: 12px; height: 2px; background: rgba(243,241,232,.22); } .cmp-x::before { transform: rotate(45deg); } .cmp-x::after { transform: rotate(-45deg); } .cmp-go { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; padding: 15px 22px 15px 28px; border: 0; border-radius: 999px; cursor: pointer; background: #f3b63f; color: #080b09; font-weight: 900; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 14px 38px rgba(243,182,63,.24); transition: background .3s, transform .3s, box-shadow .3s; } .cmp-go:hover { background: #f3f1e8; transform: translateY(-2px); box-shadow: 0 20px 50px rgba(243,182,63,.34); } .cmp-go svg { width: 15px; height: 15px; transition: transform .3s; } .cmp-go:hover svg { transform: translateX(4px); } /* ---- Questions people ask ---- */ .faq-band { padding: 90px 0 110px; } .faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; margin-top: 8px; } .acc { display: flex; flex-direction: column; gap: 10px; } .acc-item { border: 1px solid rgba(243,241,232,.08); border-radius: 16px; overflow: hidden; background: rgba(12,26,20,.5); transition: border-color .3s, background .3s; } .acc-item.open, .acc-item:hover { border-color: rgba(243,182,63,.4); } .acc-item.open { background: rgba(12,26,20,.85); } .acc-head { width: 100%; display: flex; align-items: center; gap: 16px; padding: 19px 22px; text-align: left; cursor: pointer; background: none; border: 0; color: inherit; } .acc-head h4 { flex: 1; font-weight: 700; color: #f3f1e8; font-size: .98rem; } .acc-item.open .acc-head h4 { color: #f3b63f; } .acc-chev { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(243,182,63,.4); display: flex; align-items: center; justify-content: center; color: #f3b63f; flex-shrink: 0; transition: transform .4s cubic-bezier(.16,.84,.44,1), background .3s; } .acc-chev svg { width: 12px; height: 12px; } .acc-item.open .acc-chev { transform: rotate(180deg); background: rgba(243,182,63,.16); } .acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.16,.84,.44,1); } .acc-item.open .acc-body { grid-template-rows: 1fr; } .acc-body > div { overflow: hidden; } .acc-body p { padding: 0 22px 20px; margin: 0; font-size: .88rem; line-height: 1.7; color: #a99f8a; } .faq-aside p { color: #a99f8a; font-size: .95rem; line-height: 1.65; margin-top: 14px; } .faq-aside a { color: #f3b63f; font-weight: 700; } /* ---- About page. An editorial two-column layout: sticky title and contents on the left, numbered sections on the right. Deliberately shares nothing with the home page bands beyond the type and the green. ---- */ .about { position: relative; background: #0a120e; } /* Blueprint: a dimensioned plan view of a light aircraft, fixed behind the page so the content scrolls over it the way the home page scrolls over the Alps. */ .about::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 15% 20%, rgba(10,18,14,.9), rgba(10,18,14,.4) 45%, transparent 75%); } .bp { position: fixed; right: -12vw; top: 52%; width: min(78vw, 1180px); height: auto; transform: translateY(-50%); pointer-events: none; z-index: 0; opacity: .5; } .bp .ln { fill: none; stroke: rgba(243,182,63,.36); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .bp .hid { fill: none; stroke: rgba(243,182,63,.28); stroke-width: 1; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; } .bp .cl { fill: none; stroke: rgba(243,182,63,.25); stroke-width: 1; stroke-dasharray: 18 6 3 6; vector-effect: non-scaling-stroke; } .bp .dim { fill: none; stroke: rgba(243,241,232,.35); stroke-width: 1; vector-effect: non-scaling-stroke; } .bp text { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .14em; fill: rgba(243,241,232,.5); } .bp text.t { fill: rgba(243,182,63,.55); font-size: 11px; } @media (max-width: 900px) { .bp { display: none; } } .about-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: 72px; align-items: start; } .about-aside { position: sticky; top: 112px; } .about-toc { margin-top: 34px; display: flex; flex-direction: column; } .about-toc a { display: flex; align-items: center; gap: 14px; padding: 10px 0; color: #7c745f; font-size: .84rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(243,241,232,.06); transition: color .3s, padding-left .3s; } .about-toc a i { font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .18em; color: #f3b63f; } .about-toc a:hover { color: #f3f1e8; padding-left: 6px; } .about-sec { padding: 10px 0 76px; } .about-sec + .about-sec { border-top: 1px solid rgba(243,241,232,.08); } .about-num { display: flex; align-items: center; gap: 12px; margin: 30px 0 20px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #f3b63f; } .about-sec:first-child .about-num { margin-top: 0; } .about-num::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(243,182,63,.4), transparent); } .about-sec h2 { font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: #f3f1e8; font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin-bottom: 18px; } .about-sec h2 em { font-style: normal; color: #f3b63f; } .about-sec p { color: #c9bea3; line-height: 1.72; font-size: 1.02rem; } .about-sec p + p { margin-top: 14px; } .about-sec a.mail { color: #f3b63f; font-weight: 700; } /* Then / now ledger */ .ledger { margin-top: 28px; border: 1px solid rgba(243,241,232,.08); border-radius: 18px; overflow: hidden; background: rgba(0,0,0,.35); } .ledger-row { display: grid; grid-template-columns: 104px 1fr 1.15fr; } .ledger-row + .ledger-row { border-top: 1px solid rgba(243,241,232,.06); } .ledger-row > div { padding: 15px 18px; font-size: .9rem; line-height: 1.5; } .ledger-row > div:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #7c745f; padding-top: 18px; } .ledger-then { color: #7c745f; text-decoration: line-through; text-decoration-color: rgba(239,68,68,.55); text-decoration-thickness: 1.5px; } .ledger-now { color: #f3f1e8; border-left: 1px solid rgba(243,182,63,.18); background: rgba(243,182,63,.04); } .ledger-head { background: rgba(243,241,232,.03); } .ledger-head > div { padding: 12px 18px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; } .ledger-head .ledger-then { text-decoration: none; color: #a99f8a; } .ledger-head .ledger-now { color: #f3b63f; } /* Checklist that ticks itself when it scrolls into view (the parent's .is-in from the reveal observer) */ .chk { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; } .chk li { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(243,241,232,.07); background: rgba(0,0,0,.3); opacity: .45; transform: translateX(-6px); transition: opacity .6s ease, transform .6s ease, border-color .6s ease; transition-delay: calc(var(--i) * .22s); } .chk li b { display: block; color: #f3f1e8; font-size: 1rem; margin-bottom: 4px; } .chk li span.t { color: #a99f8a; font-size: .9rem; line-height: 1.55; } .chk-box { width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid rgba(243,182,63,.5); display: flex; align-items: center; justify-content: center; margin-top: 2px; transition: background .4s ease; transition-delay: calc(var(--i) * .22s + .25s); } .chk-box svg { width: 14px; height: 14px; stroke: #080b09; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .45s ease; transition-delay: calc(var(--i) * .22s + .4s); } .is-in .chk li { opacity: 1; transform: none; border-color: rgba(243,182,63,.25); } .is-in .chk-box { background: #f3b63f; } .is-in .chk-box svg { stroke-dashoffset: 0; } /* Vertical rail: written, drawn, marked */ .rail { position: relative; margin-top: 28px; padding-left: 36px; } .rail::before { content: ''; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, rgba(243,182,63,.6), rgba(243,182,63,.06)); } .rail-step { position: relative; padding: 0 0 32px; } .rail-step:last-child { padding-bottom: 0; } .rail-step::before { content: ''; position: absolute; left: -30px; top: 5px; width: 13px; height: 13px; border-radius: 50%; background: #0b100d; border: 2px solid #f3b63f; box-shadow: 0 0 14px rgba(243,182,63,.45); } .rail-step i { display: block; font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #f3b63f; margin-bottom: 6px; } .rail-step b { display: block; color: #f3f1e8; font-size: 1.08rem; margin-bottom: 6px; } .rail-step p { font-size: .95rem; } .about-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; } @media (max-width: 640px) { .about-links { grid-template-columns: 1fr 1fr; } } .about-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(243,241,232,.1); background: linear-gradient(160deg, rgba(13,25,20,.96), rgba(10,12,10,.98)); color: #f3f1e8; font-size: .9rem; font-weight: 700; text-decoration: none; transition: border-color .3s, transform .3s; } .about-links a::after { content: '\2192'; color: #f3b63f; font-weight: 800; transition: transform .3s; } .about-links a:hover { border-color: rgba(243,182,63,.5); transform: translateY(-2px); } .about-links a:hover::after { transform: translateX(3px); } @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 44px; } .about-aside { position: static; } .ledger-row { grid-template-columns: 92px 1fr 1fr; } } @media (max-width: 560px) { .ledger-head { display: none; } .ledger-row { grid-template-columns: 1fr; } .ledger-row > div:first-child { padding-bottom: 0; } .ledger-now { border-left: 0; border-top: 1px solid rgba(243,182,63,.18); } } /* ---- Help page: the tower. Approach lights running in to a search box that filters the answers as you type, and taxiway-sign section headers. ---- */ .tower { position: relative; background: #0a0e0b; } .rose { position: fixed; left: 50%; top: 58%; width: 118vmin; height: 118vmin; transform: translate(-50%, -50%); pointer-events: none; opacity: .26; z-index: 0; } .rose::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from -0.55deg, rgba(243,182,63,.7) 0 1.1deg, transparent 1.1deg 30deg); -webkit-mask: radial-gradient(circle, transparent 41.5%, #000 42%, #000 46.5%, transparent 47%); mask: radial-gradient(circle, transparent 41.5%, #000 42%, #000 46.5%, transparent 47%); } .rose::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from -0.3deg, rgba(243,182,63,.45) 0 .6deg, transparent .6deg 5deg); -webkit-mask: radial-gradient(circle, transparent 44.2%, #000 44.5%, #000 46.5%, transparent 47%); mask: radial-gradient(circle, transparent 44.2%, #000 44.5%, #000 46.5%, transparent 47%); } .rose i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(243,182,63,.28); } .rose i.r2 { inset: 9%; border-color: rgba(243,182,63,.16); } .rose i.r3 { inset: 30%; border-color: rgba(243,182,63,.12); } .rose u { position: absolute; left: 50%; top: 50%; width: 62%; height: 62%; transform: translate(-50%,-50%); text-decoration: none; background: linear-gradient(180deg, rgba(243,182,63,.10), rgba(243,182,63,.03)); clip-path: polygon(50% 0, 55% 45%, 100% 50%, 55% 55%, 50% 100%, 45% 55%, 0 50%, 45% 45%); } .rose u.d { width: 34%; height: 34%; transform: translate(-50%,-50%) rotate(45deg); background: rgba(243,182,63,.06); } .rose b { position: absolute; transform: translate(-50%, -50%); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 800; color: rgba(243,182,63,.75); letter-spacing: .1em; } .tower::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(243,182,63,.12), transparent 52%); } .als { display: flex; justify-content: center; gap: 12px; margin: 0 auto 36px; } .als i { display: block; width: 30px; height: 4px; border-radius: 2px; background: rgba(243,182,63,.14); animation: als-run 2.6s linear infinite; animation-delay: calc(var(--i) * .11s); } @keyframes als-run { 0%, 11% { background: #f3f1e8; box-shadow: 0 0 14px rgba(243,241,232,.9), 0 0 30px rgba(243,182,63,.6); } 20%, 100% { background: rgba(243,182,63,.14); box-shadow: none; } } .tower-search { position: relative; max-width: 640px; margin: 0 auto; } .tower-search input { width: 100%; padding: 20px 58px 20px 24px; border-radius: 18px; border: 1px solid rgba(243,182,63,.35); background: rgba(0,0,0,.55); color: #f3f1e8; font-size: 1.05rem; outline: none; -webkit-appearance: none; transition: border-color .3s, box-shadow .3s; } .tower-search input:focus { border-color: #f3b63f; box-shadow: 0 0 0 4px rgba(243,182,63,.12), 0 0 44px rgba(243,182,63,.16); } .tower-search input::placeholder { color: #7c745f; } .tower-search svg { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #f3b63f; pointer-events: none; } .tower-hits { margin-top: 12px; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #7c745f; min-height: 14px; } .sign { display: inline-flex; align-items: stretch; border-radius: 10px; overflow: hidden; border: 1.5px solid #f3b63f; margin-bottom: 16px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; box-shadow: 0 0 24px rgba(243,182,63,.12); } .sign b { background: #f3b63f; color: #080b09; padding: 9px 13px; } .sign span { padding: 9px 16px; color: #f3b63f; background: rgba(0,0,0,.6); } .tower-sec { margin-bottom: 44px; } .acc-item.miss { display: none; } @media (max-width: 1080px) { .inc-grid { grid-template-columns: repeat(6, 1fr); } .inc { grid-column: span 2; } .inc:nth-child(4), .inc:nth-child(5) { grid-column: span 3; } .inc-grid.inc-four { grid-template-columns: repeat(2, 1fr); } .inc-grid.inc-four .inc, .inc-grid.inc-four .inc:nth-child(4) { grid-column: auto; } .inc-mark { height: 72px; } } @media (max-width: 900px) { .sq-grid, .lic-grid, .cmp-wrap, .faq-grid { grid-template-columns: 1fr; gap: 32px; } .band { padding: 72px 0; } } @media (max-width: 640px) { .inc-head { flex-direction: column; align-items: flex-start; gap: 14px; } .inc-price { text-align: left; } .inc-grid, .inc-grid.inc-four { grid-template-columns: 1fr; } .inc, .inc:nth-child(4), .inc:nth-child(5) { grid-column: auto; } .inc { padding: 20px 20px 20px 18px; display: grid; grid-template-columns: 58px 1fr; column-gap: 18px; align-items: center; } .inc-mark { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 58px; height: 52px; margin-bottom: 0; } .inc-mark svg { width: 100%; height: 100%; } .inc b { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 5px; padding-right: 34px; } .inc p { grid-column: 2; grid-row: 2; align-self: start; } .lic-cmp { grid-template-columns: 1fr 1fr; } .cmp-head, .cmp-row { grid-template-columns: 1fr 72px 72px; padding-left: 14px; padding-right: 14px; } .cmp-l { font-size: .82rem; } } /* ===================================================================== OVERLAYS. One language for every modal, prompt, notice and checkout step, so a confirmation looks like it belongs to the same product as the page behind it. ===================================================================== */ .ov { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; } .ov-scrim { position: absolute; inset: 0; background: rgba(4,6,5,.84); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: ov-fade .2s ease both; } @keyframes ov-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes ov-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } .ov-card { position: relative; width: 100%; max-height: calc(100vh - 40px); display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: linear-gradient(168deg, #121b16 0%, #0b100d 62%); border: 1px solid rgba(243,182,63,.15); box-shadow: 0 40px 90px rgba(0,0,0,.72); animation: ov-rise .26s cubic-bezier(.16,.84,.44,1) both; } /* the hairline every panel on this site wears */ .ov-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(243,182,63,.75), transparent); z-index: 3; } .ov-sm { max-width: 420px; } .ov-md { max-width: 480px; } .ov-lg { max-width: 660px; } .ov-head { padding: 26px 28px 22px; flex-shrink: 0; } .ov-head.has-x { padding-right: 62px; } .ov-kick { display: flex; align-items: center; gap: 9px; color: var(--roo, #f3b63f); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; } .ov-kick::before { content: ''; width: 14px; height: 1px; background: currentColor; flex-shrink: 0; } .ov-h { font-size: 1.32rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.25; color: #f3f1e8; } .ov-kick + .ov-h { margin-top: 9px; } .ov-p { margin-top: 8px; font-size: .875rem; line-height: 1.6; color: #a99f8a; } /* head and foot stay put; the middle gives way when the viewport is short */ .ov-body { padding: 0 28px 24px; overflow-y: auto; min-height: 0; } .ov-body::-webkit-scrollbar { width: 9px; } .ov-body::-webkit-scrollbar-track { background: transparent; } .ov-body::-webkit-scrollbar-thumb { background: #27332c; border-radius: 9px; border: 3px solid transparent; background-clip: content-box; } .ov-foot { display: flex; gap: 10px; justify-content: flex-end; align-items: center; padding: 16px 28px; border-top: 1px solid rgba(243,241,232,.07); background: rgba(0,0,0,.28); flex-shrink: 0; } .ov-foot-stack { flex-direction: column-reverse; align-items: stretch; } .ov-x { position: absolute; top: 15px; right: 15px; z-index: 4; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #7c745f; background: none; border: 1px solid transparent; cursor: pointer; transition: color .2s, background .2s, border-color .2s; } .ov-x:hover { color: #f3f1e8; background: rgba(243,241,232,.07); border-color: rgba(243,241,232,.1); } .ov-x svg { width: 15px; height: 15px; } .ov-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--roo, #f3b63f); background: rgba(243,182,63,.08); border: 1px solid rgba(243,182,63,.22); margin-bottom: 17px; flex-shrink: 0; } .ov-icon svg { width: 21px; height: 21px; } .ov-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 19px; border-radius: 9px; border: 1px solid transparent; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s; } .ov-btn:active { transform: translateY(1px); } .ov-btn-p { background: #f3b63f; color: #080b09; box-shadow: 0 10px 26px rgba(243,182,63,.2); } .ov-btn-p:hover { background: #f3f1e8; box-shadow: 0 14px 34px rgba(243,182,63,.32); } .ov-btn-g { border-color: rgba(243,241,232,.14); color: #a99f8a; } .ov-btn-g:hover { color: #f3f1e8; border-color: rgba(243,241,232,.3); background: rgba(243,241,232,.05); } .ov-btn-q { color: #7c745f; } .ov-btn-q:hover { color: #f3f1e8; } .ov-btn-block { width: 100%; } .ov-label { display: block; margin-bottom: 8px; color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } .ov-input { width: 100%; background: #080b09; border: 1px solid #26302a; border-radius: 10px; padding: 13px 15px; color: #f3f1e8; font-size: .9rem; font-weight: 500; transition: border-color .2s, box-shadow .2s; } .ov-input::placeholder { color: #574f41; font-weight: 400; } .ov-input:focus { outline: none; border-color: #f3b63f; box-shadow: 0 0 0 3px rgba(243,182,63,.13); } .ov-field + .ov-field { margin-top: 15px; } .ov-note { padding: 12px 14px; border-radius: 10px; font-size: .78rem; line-height: 1.55; background: rgba(243,182,63,.06); border: 1px solid rgba(243,182,63,.16); color: #cbbf9f; } .ov-note-warn { background: rgba(224,180,92,.07); border-color: rgba(224,180,92,.2); color: #c9ae7d; } /* long-form panels: terms, privacy */ .ov-scroll { overflow-y: auto; min-height: 0; padding: 24px 28px 28px; color: #a99f8a; font-size: .84rem; line-height: 1.72; } .ov-scroll::-webkit-scrollbar { width: 9px; } .ov-scroll::-webkit-scrollbar-track { background: transparent; } .ov-scroll::-webkit-scrollbar-thumb { background: #27332c; border-radius: 9px; border: 3px solid transparent; background-clip: content-box; } .ov-scroll::-webkit-scrollbar-thumb:hover { background: #36463c; background-clip: content-box; } .ov-sec + .ov-sec { margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(243,241,232,.06); } .ov-sec > h4 { display: flex; align-items: baseline; gap: 11px; margin-bottom: 10px; color: #f3f1e8; font-size: .95rem; font-weight: 700; letter-spacing: -.01em; } .ov-sec > h4 i { font-style: normal; color: #f3b63f; flex-shrink: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .1em; } .ov-sec p + p { margin-top: 11px; } .ov-sec ul { margin-top: 11px; display: flex; flex-direction: column; gap: 9px; } .ov-sec li { position: relative; padding-left: 17px; } .ov-sec li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 1px; background: rgba(243,182,63,.7); } .ov-scroll strong { color: #f3f1e8; font-weight: 600; } /* order summary line used at checkout and on the receipt */ .ov-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px dashed rgba(243,241,232,.09); } .ov-line:last-child { border-bottom: 0; } .ov-line dt { color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .ov-line dd { color: #f3f1e8; font-size: .86rem; font-weight: 600; text-align: right; } .ov-line-total dd { color: #f3b63f; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; } .ov-spin { position: relative; width: 54px; height: 54px; } .ov-spin::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(243,241,232,.09); } .ov-spin span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: #f3b63f; animation: ov-spin 900ms linear infinite; } @keyframes ov-spin { to { transform: rotate(360deg); } } /* ---- Notifications ---- */ #toast-container { position: fixed; right: 24px; bottom: 24px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: calc(100vw - 48px); } .tst { position: relative; overflow: hidden; pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; min-width: 296px; max-width: 380px; padding: 13px 16px 14px 18px; border-radius: 12px; background: linear-gradient(160deg, #121b16, #0f110f); border: 1px solid rgba(243,241,232,.09); box-shadow: 0 18px 44px rgba(0,0,0,.62); transform: translateX(14px); opacity: 0; transition: transform .28s cubic-bezier(.16,.84,.44,1), opacity .28s ease; } .tst.is-in { transform: none; opacity: 1; } .tst::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #f3b63f; } .tst-err::before { background: #ef4444; } .tst-ico { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: #f3b63f; } .tst-err .tst-ico { color: #ef4444; } .tst-txt b { display: block; margin-bottom: 3px; color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } .tst-txt span { display: block; color: #f3f1e8; font-size: .83rem; line-height: 1.45; } .tst-bar { position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: rgba(243,182,63,.5); transform-origin: 0 50%; animation: tst-drain 4s linear forwards; } .tst-err .tst-bar { background: rgba(239,68,68,.5); } @keyframes tst-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (max-width: 520px) { .ov { padding: 14px; } .ov-head { padding: 22px 20px 20px; } .ov-body { padding: 0 20px 20px; } .ov-foot { padding: 14px 20px; flex-direction: column-reverse; align-items: stretch; } .ov-scroll { padding: 20px; } .ov-h { font-size: 1.26rem; } #toast-container { left: 14px; right: 14px; bottom: 14px; } .tst { min-width: 0; max-width: none; } } @media (prefers-reduced-motion: reduce) { .ov-scrim, .ov-card { animation: none !important; } .tst-bar { animation-duration: 0s; } } /* ========================================================================= THE FLYING ROO. Everything above is the shared design language; this block is what makes it this site: a first-light horizon in the hero, black and gold overlays, and the pieces the single PPLA exam needs. ========================================================================= */ :root { --roo: #f3b63f; --roo-deep: #c98232; --roo-pale: #ffd87a; --ink: #080b09; --cream: #f3f1e8; --sand: #e6d7b8; --moss: #0b251d; } ::selection { background: #f3b63f; color: #080b09; } /* ---- The hero: an outback horizon in the minutes before first light. Stars overhead, a band of dawn on the skyline, three ranges at different parallax rates, dust lifting off the plain, and an aeroplane crossing high. ---- */ .hero-roo { position: relative; overflow: hidden; min-height: max(100vh, 720px); background: radial-gradient(120% 70% at 50% 108%, #2a1e0a 0%, #150f06 26%, #0b0d0a 52%, #070907 100%); } .hero-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 88%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 88%); } .hero-stars i, .ab-stars i { position: absolute; display: block; border-radius: 50%; background: #f3f1e8; animation: twinkle var(--t, 4s) ease-in-out infinite; animation-delay: var(--d, 0s); } .hero-dawn { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 1; pointer-events: none; width: 140%; max-width: 2000px; height: 46vh; min-height: 300px; background: radial-gradient(52% 70% at 50% 100%, rgba(255,216,122,.34) 0%, rgba(243,182,63,.18) 32%, rgba(201,130,50,.08) 58%, transparent 74%), radial-gradient(80% 60% at 50% 100%, rgba(243,182,63,.10) 0%, transparent 70%); filter: blur(18px); } /* The sun sits ON the horizon: the ranges below paint over it (same stacking context, later in the DOM), so only the arc above the ridge line shows. It rides the same parallax as the far range - the wrapper takes the transform, because parallaxFrame overwrites transform and would otherwise destroy a translateX centring - so the two never drift apart on scroll and the flat masked edge is never exposed. */ .hero-sun-wrap { position: absolute; left: 0; right: 0; bottom: 2.5vh; z-index: 2; pointer-events: none; display: flex; justify-content: center; will-change: transform; } .hero-sun { position: relative; width: 24vh; height: 24vh; min-width: 168px; min-height: 168px; border-radius: 50%; background: radial-gradient(circle, rgba(255,232,170,.9) 0%, rgba(255,216,122,.55) 22%, rgba(243,182,63,.18) 48%, transparent 70%); filter: blur(6px); opacity: .9; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 47%, transparent 50%); mask-image: linear-gradient(180deg, #000 0%, #000 47%, transparent 50%); } .hero-range { will-change: transform; } .hero-range.mid { height: 24vh; min-height: 165px; z-index: 2; } .hero-range .rim { fill: none; stroke: rgba(243,182,63,.28); stroke-width: 1.4; vector-effect: non-scaling-stroke; } .hero-range .rim-soft { fill: none; stroke: rgba(243,182,63,.14); stroke-width: 1; vector-effect: non-scaling-stroke; } .hero-scrim { background: radial-gradient(70% 58% at 50% 42%, rgba(7,9,7,.62) 0%, rgba(7,9,7,.30) 52%, rgba(7,9,7,0) 82%); } .mote { background: rgba(255,216,122,.9); box-shadow: 0 0 6px rgba(243,182,63,.75); } .hero-plane { position: absolute; z-index: 3; pointer-events: none; opacity: 0; color: #f3f1e8; filter: drop-shadow(0 0 10px rgba(243,241,232,.55)); } .hero-plane svg { width: 30px; height: 30px; display: block; } .hero-plane .trail { position: absolute; right: 24px; top: 50%; height: 1.5px; width: 260px; transform: translateY(-50%); background: linear-gradient(to left, rgba(243,241,232,.55), rgba(243,182,63,.25) 40%, transparent); filter: blur(.6px); } @keyframes plane-cross { 0% { opacity: 0; transform: translate3d(-12vw, 0, 0); } 6% { opacity: .9; } 94% { opacity: .9; } 100% { opacity: 0; transform: translate3d(112vw, -6vh, 0); } } .hero-plane.go { animation: plane-cross 26s linear forwards; } .hero-kick { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(243,182,63,.28); background: rgba(243,182,63,.07); color: #ffd87a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; } .hero-kick i { width: 6px; height: 6px; border-radius: 50%; background: #f3b63f; box-shadow: 0 0 10px #f3b63f; animation: beacon-pulse 2s infinite ease-in-out; } .hero-h1 { font-weight: 800; letter-spacing: -.045em; line-height: .96; color: #f3f1e8; text-wrap: balance; font-size: clamp(3rem, 8.4vw, 6.6rem); } .hero-h1 .gold { color: transparent; background: linear-gradient(92deg, #f3b63f 0%, #ffd87a 55%, #f3f1e8 120%); -webkit-background-clip: text; background-clip: text; } .hero-sub { margin: 26px auto 0; max-width: 46rem; color: #e6d7b8; font-weight: 300; line-height: 1.6; font-size: clamp(1.05rem, 1.7vw, 1.4rem); text-wrap: pretty; } .hero-sub b { color: #f3f1e8; font-weight: 600; } .hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; } .btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 40px; border-radius: 999px; border: 0; cursor: pointer; background: #f3b63f; color: #080b09; font-weight: 900; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 16px 44px rgba(243,182,63,.26); transition: background .3s, transform .3s, box-shadow .3s; } .btn-gold:hover { background: #f3f1e8; transform: translateY(-2px); box-shadow: 0 22px 54px rgba(243,182,63,.36); } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 34px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(243,241,232,.16); background: rgba(243,241,232,.04); color: #e6d7b8; font-weight: 800; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; transition: border-color .3s, color .3s, background .3s, transform .3s; } .btn-ghost:hover { border-color: rgba(243,182,63,.6); color: #f3f1e8; background: rgba(243,182,63,.06); transform: translateY(-2px); } .btn-ghost svg, .btn-gold svg { width: 15px; height: 15px; transition: transform .3s; } .btn-ghost:hover svg, .btn-gold:hover svg { transform: translateX(4px); } .hero-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin-top: 34px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #a99f8a; } .hero-facts span { display: inline-flex; align-items: center; gap: 9px; } .hero-facts span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: rgba(243,182,63,.8); } @media (max-width: 640px) { .hero-facts { gap: 8px 16px; font-size: 9px; } .btn-gold, .btn-ghost { width: 100%; } .hero-sun { width: 168px; height: 168px; min-width: 0; min-height: 0; } .hero-sun-wrap { bottom: 1.5vh; } } /* ---- The exam, in one line under the hero: the facts of the PPLA as a row of instruments ---- */ .facts-band { position: relative; z-index: 20; background: rgba(8,11,9,.86); border-top: 1px solid rgba(243,241,232,.06); border-bottom: 1px solid rgba(243,241,232,.06); } .facts { display: grid; grid-template-columns: repeat(5, 1fr); } .fact { padding: 26px 18px; text-align: center; border-right: 1px solid rgba(243,241,232,.06); transition: background .4s; } .fact:last-child { border-right: 0; } .fact:hover { background: rgba(243,182,63,.04); } .fact b { display: block; font-weight: 800; letter-spacing: -.035em; line-height: 1; color: #f3f1e8; font-size: clamp(1.45rem, 2.5vw, 1.95rem); font-variant-numeric: tabular-nums; } .fact b small { font-size: .46em; font-weight: 700; color: #7c745f; margin-left: .45em; letter-spacing: .04em; text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .fact::after { content: ''; display: block; width: 22px; height: 2px; margin: 12px auto 0; border-radius: 2px; background: rgba(243,182,63,.45); transition: width .4s, background .4s; } .fact:hover::after { width: 42px; background: #f3b63f; } .fact > span { display: block; margin-top: 10px; color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } @media (max-width: 900px) { .facts { grid-template-columns: repeat(3, 1fr); } .fact:nth-child(3) { border-right: 0; } .fact:nth-child(n+4) { border-top: 1px solid rgba(243,241,232,.06); } } @media (max-width: 520px) { .facts { grid-template-columns: repeat(2, 1fr); } .fact { padding: 20px 12px; } .fact:nth-child(3) { border-right: 1px solid rgba(243,241,232,.06); } .fact:nth-child(2n) { border-right: 0; } .fact:nth-child(n+3) { border-top: 1px solid rgba(243,241,232,.06); } .fact:last-child { grid-column: 1 / -1; border-top: 1px solid rgba(243,241,232,.06); } } /* ---- The sample question also carries the type-a-number format CASA uses ---- */ .sq-num { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .sq-num input { flex: 1; min-width: 150px; max-width: 240px; background: #080b09; border: 1px solid rgba(243,241,232,.16); border-radius: 12px; padding: 13px 16px; color: #f3f1e8; font-size: 1.35rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .04em; transition: border-color .2s, box-shadow .2s; } .sq-num input:focus { outline: none; border-color: #f3b63f; box-shadow: 0 0 0 3px rgba(243,182,63,.14); } .sq-num input:disabled { opacity: .7; } .sq-num .unit { color: #a99f8a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .sq-num button { padding: 13px 20px; border-radius: 12px; border: 1px solid rgba(243,182,63,.45); background: rgba(243,182,63,.08); color: #f3b63f; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; } .sq-num button:hover { background: #f3b63f; color: #080b09; } .sq-num.right input { border-color: #f3b63f; background: rgba(243,182,63,.1); } .sq-num.wrong input { border-color: #ef4444; background: rgba(239,68,68,.09); } .sq-fmt { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 3px 9px; border-radius: 6px; border: 1px solid rgba(243,182,63,.3); color: #f3b63f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } /* ---- The real one costs $217.24. One panel, three figures, the hook underneath. ---- */ .cost-band { padding: 100px 0; } .cost { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .cost-panel { position: relative; overflow: hidden; border-radius: 26px; padding: 34px 32px 30px; border: 1px solid rgba(243,182,63,.22); background: linear-gradient(168deg, rgba(12,26,20,.92), rgba(8,11,9,.98)); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); } .cost-panel::before { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(243,182,63,.8), transparent); } .cost-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px dashed rgba(243,241,232,.1); } .cost-row:last-of-type { border-bottom: 0; } .cost-row span { color: #a99f8a; font-size: .92rem; } .cost-row b { font-weight: 900; letter-spacing: -.03em; color: #f3f1e8; font-size: 1.5rem; font-variant-numeric: tabular-nums; } .cost-row.total { margin-top: 6px; padding-top: 22px; border-top: 1px solid rgba(243,182,63,.35); border-bottom: 0; } .cost-row.total span { color: #f3f1e8; font-weight: 700; } .cost-row.total b { font-size: 2.6rem; color: #f3b63f; text-shadow: 0 0 24px rgba(243,182,63,.35); } .cost-row.us b { color: #f3b63f; } .cost-src { margin-top: 18px; color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.7; } @media (max-width: 900px) { .cost { grid-template-columns: 1fr; gap: 32px; } } /* ---- Eight areas, one paper: the blueprint the mock is drawn to ---- */ .areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 36px; } .area { position: relative; padding: 18px 18px 16px; border-radius: 16px; border: 1px solid rgba(243,241,232,.07); background: linear-gradient(168deg, rgba(12,26,20,.6), rgba(8,11,9,.92)); transition: border-color .25s, transform .25s; } .area:hover { border-color: rgba(243,182,63,.5); transform: translateY(-3px); } .area b { display: block; color: #f3f1e8; font-weight: 800; font-size: .98rem; letter-spacing: -.01em; margin-bottom: 6px; padding-right: 44px; line-height: 1.25; } .area i { display: block; font-style: normal; color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; } .area em { position: absolute; top: 14px; right: 16px; font-style: normal; color: #f3b63f; font-weight: 900; font-size: 1.1rem; letter-spacing: -.02em; } .area em small { font-size: .6em; color: #7c745f; font-weight: 700; margin-left: 2px; } .area-bar { height: 3px; border-radius: 3px; background: rgba(243,241,232,.08); margin-top: 14px; overflow: hidden; } .area-bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, #c98232, #f3b63f); border-radius: 3px; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.16,.84,.44,1) .2s; } .is-in .area-bar i { transform: scaleX(1); } @media (max-width: 900px) { .areas { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .areas { grid-template-columns: 1fr; } } /* ---- Overlays: black and gold. The green stays an accent on the page; a prompt or a receipt reads as ink and brass. ---- */ .ov-scrim { background: rgba(5,6,5,.86); } .ov-card { background: linear-gradient(168deg, #16140f 0%, #0b0b09 62%); border-color: rgba(243,182,63,.22); box-shadow: 0 40px 90px rgba(0,0,0,.78), 0 0 0 1px rgba(0,0,0,.6); } .ov-card::before { background: linear-gradient(90deg, transparent, rgba(243,182,63,.9), transparent); } .ov-icon { color: #f3b63f; background: rgba(243,182,63,.08); border-color: rgba(243,182,63,.26); } .ov-input { background: #0a0a08; border-color: #2c2a22; color: #f3f1e8; } .ov-input:focus { border-color: #f3b63f; box-shadow: 0 0 0 3px rgba(243,182,63,.14); } .ov-note { background: rgba(243,182,63,.06); border-color: rgba(243,182,63,.2); color: #d8cba9; } .ov-note-warn { background: rgba(243,182,63,.09); border-color: rgba(243,182,63,.3); color: #ffd87a; } .ov-foot { background: rgba(0,0,0,.34); border-top-color: rgba(243,241,232,.07); } .ov-btn-p { background: #f3b63f; color: #080b09; box-shadow: 0 10px 26px rgba(243,182,63,.22); } .ov-btn-p:hover { background: #f3f1e8; } .ov-line-total dd { color: #f3b63f; } .tst { background: linear-gradient(160deg, #16140f, #0b0b09); border-color: rgba(243,182,63,.18); } #loading-overlay { background: #0a0a08 !important; } /* ---- The exam centre: one exam, so one card carries it ---- */ .exam-card { position: relative; overflow: hidden; border-radius: 28px; padding: 40px 40px 36px; border: 1px solid rgba(243,182,63,.3); background: linear-gradient(165deg, rgba(14,28,22,.94) 0%, rgba(8,11,9,.98) 60%); box-shadow: 0 40px 100px -30px rgba(0,0,0,.95), 0 0 60px rgba(243,182,63,.06); } .exam-card::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, #f3b63f, transparent); box-shadow: 0 0 18px rgba(243,182,63,.8); } .exam-card-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; } .exam-card h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: #f3f1e8; } .exam-card .kick { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; color: #f3b63f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; } .exam-card .kick::before { content: ''; width: 16px; height: 1px; background: currentColor; } .exam-specs { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 20px; color: #a99f8a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .exam-specs span { display: inline-flex; align-items: center; gap: 8px; } .exam-specs span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #f3b63f; } .exam-card p { color: #e6d7b8; line-height: 1.65; font-size: .98rem; } .exam-launch { padding: 26px; border-radius: 20px; border: 1px solid rgba(243,241,232,.08); background: rgba(0,0,0,.4); } .exam-launch label { display: block; margin-bottom: 10px; color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; } .code-input { width: 100%; background: #080b09; border: 1px solid rgba(243,241,232,.14); border-radius: 14px; padding: 16px 18px; text-align: center; color: #f3b63f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.15rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; transition: border-color .2s, box-shadow .2s; } .code-input::placeholder { color: #574f41; letter-spacing: .22em; } .code-input:focus { outline: none; border-color: #f3b63f; box-shadow: 0 0 0 4px rgba(243,182,63,.12), 0 0 30px rgba(243,182,63,.12); } .exam-launch-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .exam-launch-row button { padding: 15px 12px; border-radius: 12px; font-weight: 900; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: all .25s; } .launch-btn { border: 1px solid rgba(243,241,232,.14); background: rgba(243,241,232,.04); color: #f3f1e8; } .launch-btn:hover { background: #f3f1e8; color: #080b09; border-color: #f3f1e8; } .launch-btn:disabled { opacity: .6; cursor: wait; } .buy-btn { border: 1px solid #f3b63f; background: #f3b63f; color: #080b09; box-shadow: 0 10px 28px rgba(243,182,63,.22); } .buy-btn:hover { background: #f3f1e8; border-color: #f3f1e8; } .exam-launch-foot { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #7c745f; font-size: .78rem; } .exam-launch-foot button { background: none; border: 0; padding: 0; color: #a99f8a; font-size: .78rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243,182,63,.5); } .exam-launch-foot button:hover { color: #f3b63f; } @media (max-width: 900px) { .exam-card { padding: 28px 22px 24px; } .exam-card-grid { grid-template-columns: 1fr; gap: 26px; } } /* ---- Bundles, restyled for the ticket look ---- */ .bundle-name { color: #a99f8a; } .bundle-qty span { color: #7c745f; } /* ---- Inside an exam: the reference chip, the numeric box, no shortcut legend ---- */ .q-ref { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 7px; border: 1px solid rgba(243,182,63,.25); background: rgba(243,182,63,.06); color: #f3b63f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .num-box { padding: 20px; border-radius: 16px; border: 1px solid rgba(243,241,232,.1); background: rgba(243,241,232,.03); } .num-box label { display: block; margin-bottom: 10px; color: #a99f8a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } .num-box input { width: 100%; max-width: 320px; background: #080b09; border: 1px solid rgba(243,241,232,.16); border-radius: 12px; padding: 14px 16px; color: #f3f1e8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.6rem; font-weight: 700; transition: border-color .2s, box-shadow .2s; } .num-box input:focus { outline: none; border-color: #f3b63f; box-shadow: 0 0 0 3px rgba(243,182,63,.14); } .num-box p { margin-top: 10px; color: #7c745f; font-size: .78rem; } /* ---- The offer strip: how every page hands over to the exam centre ---- */ .offer { position: relative; overflow: hidden; border-radius: 26px; padding: 40px 40px 36px; margin-top: 60px; border: 1px solid rgba(243,182,63,.28); background: linear-gradient(120deg, rgba(243,182,63,.11) 0%, rgba(12,26,20,.6) 45%, rgba(8,11,9,.9) 100%); display: grid; grid-template-columns: 1.3fr auto; gap: 28px; align-items: center; } .offer::before { content: ''; position: absolute; top: 0; left: 16%; right: 16%; height: 1px; background: linear-gradient(90deg, transparent, rgba(243,182,63,.85), transparent); } .offer h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: #f3f1e8; } .offer h3 em { font-style: normal; color: #f3b63f; } .offer p { margin-top: 10px; color: #e6d7b8; opacity: .85; line-height: 1.6; font-size: .95rem; max-width: 52ch; } .offer-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .offer-cta .alt { color: #7c745f; font-size: .78rem; } .offer-cta .alt button { background: none; border: 0; padding: 0 2px; color: #a99f8a; font-size: .78rem; cursor: pointer; } .offer-cta .alt button b { color: #f3f1e8; } .offer-cta .alt button:hover, .offer-cta .alt button:hover b { color: #f3b63f; } @media (max-width: 760px) { .offer { grid-template-columns: 1fr; padding: 28px 22px 24px; } .offer-cta { align-items: stretch; } .offer-cta .alt { text-align: center; } } /* ---- Warm the shared furniture that arrived from the Kiwi ---- */ .band h2 em, .about-sec h2 em, .doc h2 em { color: #f3b63f; } .inc-price b { color: #f3b63f; } .glass-panel:hover { border-color: rgba(243,182,63,.45); box-shadow: 0 0 30px rgba(243,182,63,.08); } .nav-btn-active { color: #f3b63f; background: rgba(243,182,63,.1); border-color: rgba(243,182,63,.3); box-shadow: 0 0 20px rgba(243,182,63,.15); } .nav-glass { background: rgba(6,8,7,.84); } #scroll-progress { background: linear-gradient(90deg, #c98232, #f3b63f, #ffd87a); box-shadow: 0 0 12px rgba(243,182,63,.7); } .kd-score b, .kd-date, .kd-ref, .sq-ref, .sq-why h4, .band-kick, .about-num, .lic-tag { color: #f3b63f; } .rev-stars { color: #f3b63f; } .stat-figure .u { -webkit-text-fill-color: #f3b63f; } .ranges-fixed .near { fill: #070a08; } .ranges-fixed::after { background: linear-gradient(180deg, #080b09 0%, transparent 34%); } /* ---- The paper, as a split: one ring, eight arcs, a legend that reads like a list ---- */ .dwrap { display: grid; grid-template-columns: 300px 1fr; gap: 54px; align-items: center; margin-top: 44px; } .donut { position: relative; width: 300px; height: 300px; } .donut svg { width: 100%; height: 100%; overflow: visible; } .dseg { transition: opacity .3s, stroke-width .3s; stroke-linecap: butt; } .donut svg { transform: scale(.94); opacity: 0; transition: transform .8s cubic-bezier(.16,.84,.44,1), opacity .6s; } .is-in .donut svg { transform: scale(1); opacity: 1; } .donut-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; } .donut-mid b { font-size: 3.4rem; font-weight: 900; letter-spacing: -.05em; line-height: 1; color: #f3f1e8; } .donut-mid span { margin-top: 4px; color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; } .donut-mid i { margin-top: 10px; font-style: normal; color: #f3b63f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .16em; } .dlegend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 2px 26px; } .dleg { display: grid; grid-template-columns: 10px 1fr auto; align-items: baseline; column-gap: 12px; padding: 11px 10px 11px 4px; border-bottom: 1px solid rgba(243,241,232,.06); border-radius: 8px; transition: background .25s; } .dleg:hover { background: rgba(243,182,63,.05); } .dleg i { width: 10px; height: 10px; border-radius: 3px; align-self: center; } .dleg b { color: #f3f1e8; font-size: .92rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; } .dleg u { grid-column: 2; text-decoration: none; color: #574f41; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .dleg em { grid-row: 1 / span 2; grid-column: 3; align-self: center; font-style: normal; color: #f3b63f; font-weight: 900; font-size: 1.15rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .dwrap:has(.dleg:hover) .dseg { opacity: .2; } .dwrap:has(.dleg[data-k="law"]:hover) .dseg[data-k="law"], .dwrap:has(.dleg[data-k="ops"]:hover) .dseg[data-k="ops"], .dwrap:has(.dleg[data-k="nav"]:hover) .dseg[data-k="nav"], .dwrap:has(.dleg[data-k="met"]:hover) .dseg[data-k="met"], .dwrap:has(.dleg[data-k="agk"]:hover) .dseg[data-k="agk"], .dwrap:has(.dleg[data-k="hf"]:hover) .dseg[data-k="hf"], .dwrap:has(.dleg[data-k="aero"]:hover) .dseg[data-k="aero"], .dwrap:has(.dleg[data-k="radio"]:hover) .dseg[data-k="radio"] { opacity: 1; stroke-width: 36; } @media (max-width: 980px) { .dwrap { grid-template-columns: 1fr; gap: 30px; justify-items: center; } .dlegend { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; width: 100%; } } @media (max-width: 420px) { .donut, .donut { width: 250px; height: 250px; } } /* ---- The arithmetic: the sitting, the usual prep, and this ---- */ .cost-head { max-width: 62ch; } .vs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; align-items: stretch; } .vs-col { position: relative; display: flex; flex-direction: column; padding: 30px 26px 24px; border-radius: 22px; border: 1px solid rgba(243,241,232,.08); background: linear-gradient(170deg, rgba(18,18,15,.9), rgba(8,10,8,.95)); } .vs-kick { color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; } .vs-price { margin-top: 14px; font-size: 2.6rem; font-weight: 900; letter-spacing: -.045em; line-height: 1; color: #f3f1e8; font-variant-numeric: tabular-nums; } .vs-per { margin-top: 8px; color: #a99f8a; font-size: .84rem; line-height: 1.45; } .vs-list { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(243,241,232,.07); display: grid; gap: 12px; } .vs-list li { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: baseline; color: #a99f8a; font-size: .85rem; line-height: 1.45; } .vs-list u { text-decoration: none; color: #e6d7b8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .vs-list .vs-bad u { color: #ef4444; } .vs-foot { margin-top: auto; padding-top: 22px; color: #4f4839; font-size: .7rem; line-height: 1.5; } .vs-us { border-color: rgba(243,182,63,.5); background: linear-gradient(170deg, rgba(36,28,12,.92), rgba(10,11,9,.96)); box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 50px rgba(243,182,63,.10); } .vs-us .vs-kick, .vs-us .vs-price { color: #f3b63f; } .vs-us .vs-list u { color: #f3b63f; } .vs-ribbon { position: absolute; top: -11px; left: 26px; padding: 4px 12px; border-radius: 999px; background: #f3b63f; color: #080b09; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; } @media (max-width: 900px) { .vs { grid-template-columns: 1fr; } .vs-us { order: -1; } } /* ---- The finale: the Southern Cross over a ridge. Still, not flashing. ---- */ .finale { position: relative; overflow: hidden; background: radial-gradient(120% 78% at 50% 100%, #1a1207 0%, #0c0d0a 46%, #080b09 100%); padding: 120px 24px 150px; } .fin-sky { position: absolute; inset: 0; pointer-events: none; } .fin-sky .hero-stars { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 92%); } .fin-glow { position: absolute; left: 50%; bottom: -14%; transform: translateX(-50%); width: 150%; max-width: 1700px; height: 44%; background: radial-gradient(60% 100% at 50% 100%, rgba(243,182,63,.18) 0%, rgba(201,130,50,.07) 44%, transparent 72%); filter: blur(22px); } .fin-ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26vh; min-height: 150px; } .fin-ridge path { fill: #040604; } .fin-inner { position: relative; z-index: 2; max-width: 62rem; margin: 0 auto; text-align: center; } .fin-logo { width: 88px; height: auto; margin: 0 auto 30px; opacity: .92; filter: drop-shadow(0 0 22px rgba(243,182,63,.4)); transition: transform .4s; } .fin-logo:hover { transform: scale(1.08); } .fin-h { font-size: clamp(2.1rem, 5.2vw, 4.1rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; color: #f3f1e8; text-wrap: balance; } .fin-em { color: transparent; background: linear-gradient(92deg, #f3b63f 0%, #ffd87a 52%, #f3f1e8 110%); -webkit-background-clip: text; background-clip: text; } .fin-p { margin: 22px auto 34px; max-width: 44rem; color: #a99f8a; font-weight: 300; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6; } .fin-price { margin-left: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8em; font-weight: 700; opacity: .7; } @media (max-width: 700px) { .finale { padding: 88px 20px 120px; } } /* ---- Inside an exam: the answer sheet, sized to the panel not the page ---- */ .qnav { padding: 24px 22px 20px; border-radius: 24px; border: 1px solid rgba(243,241,232,.08); background: rgba(11,15,13,.82); backdrop-filter: blur(10px); box-shadow: 0 24px 60px rgba(0,0,0,.5); } .qnav-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .qnav-head span { color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; } .qnav-head b { color: #f3f1e8; font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .qnav-head b i { font-style: normal; color: #574f41; font-size: .62em; font-weight: 700; } .qnav-bar { height: 3px; border-radius: 3px; background: rgba(243,241,232,.07); overflow: hidden; margin: 12px 0 18px; } .qnav-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #c98232, #f3b63f); transition: width .35s; } .qnav-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; } .qn { aspect-ratio: 1; min-width: 0; padding: 0; border-radius: 7px; border: 1px solid transparent; background: rgba(243,241,232,.045); color: #574f41; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s, color .18s, border-color .18s, transform .18s; } .qn:hover { background: rgba(243,241,232,.1); color: #e6d7b8; transform: translateY(-1px); } .qn-on { background: rgba(243,182,63,.14); border-color: rgba(243,182,63,.35); color: #f3b63f; } .qn-flag { background: rgba(249,115,22,.14); border-color: rgba(249,115,22,.45); color: #f97316; } .qn-now { border-color: #f3f1e8; color: #f3f1e8; box-shadow: 0 0 0 2px rgba(243,241,232,.14); } .qnav-key { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(243,241,232,.06); color: #574f41; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .qnav-key span { display: inline-flex; align-items: center; gap: 7px; } .qnav-key i { width: 9px; height: 9px; border-radius: 3px; border: 1px solid; } .qnav-key .k-on { background: rgba(243,182,63,.2); border-color: rgba(243,182,63,.5); } .qnav-key .k-flag { background: rgba(249,115,22,.2); border-color: rgba(249,115,22,.55); } .qnav-key .k-now { background: transparent; border-color: #f3f1e8; } @media (max-width: 1180px) { .qnav-grid { grid-template-columns: repeat(8, 1fr); } } /* ========================================================================= ABOUT. Not the Kiwi's blueprint: an editorial page built on the same horizon the hero uses. Big ghost numerals, a sun-track rail down the right, ridges receding behind the text. ========================================================================= */ .ab { position: relative; overflow: hidden; background: radial-gradient(110% 62% at 78% -6%, #241a08 0%, #140f07 26%, #0a0c0a 58%, #080b09 100%); } .ab::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 40% at 12% 108%, rgba(243,182,63,.09), transparent 70%); } .ab-stars { position: absolute; left: 0; right: 0; top: 0; height: 60vh; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); } .ab-contours { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; } .ab-contours path { fill: none; stroke: rgba(243,182,63,.11); stroke-width: 1; vector-effect: non-scaling-stroke; } .ab-contours path:nth-child(odd) { stroke: rgba(243,241,232,.05); } .ab-inner { position: relative; z-index: 2; max-width: 74rem; margin: 0 auto; padding: 92px 24px 120px; } .ab-hero { display: grid; grid-template-columns: 1.02fr .98fr; gap: 64px; align-items: center; padding-bottom: 18px; } .ab-top { max-width: 46ch; } .ab-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ab-fig { position: relative; overflow: hidden; padding: 26px 24px 22px; border-radius: 20px; border: 1px solid rgba(243,241,232,.09); background: linear-gradient(165deg, rgba(20,18,13,.86), rgba(9,11,9,.92)); transition: border-color .3s, transform .3s; } .ab-fig:hover { border-color: rgba(243,182,63,.45); transform: translateY(-3px); } .ab-fig b { display: block; color: #f3f1e8; font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; } .ab-fig span { display: block; margin-top: 11px; color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; line-height: 1.6; } .ab-fig::after { content: ''; position: absolute; left: 24px; bottom: 0; width: 26px; height: 2px; border-radius: 2px; background: rgba(243,182,63,.5); transition: width .35s; } .ab-fig:hover::after { width: 54px; } .ab-fig-key b { color: #f3b63f; } .ab-h1 { margin-top: 18px; font-size: clamp(2.5rem, 5.6vw, 4.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #f3f1e8; } .ab-h1 em { font-style: normal; color: transparent; background: linear-gradient(92deg, #f3b63f, #ffd87a 60%, #f3f1e8); -webkit-background-clip: text; background-clip: text; } .ab-lede { margin-top: 24px; max-width: 54ch; color: #e6d7b8; font-size: clamp(1.02rem, 1.5vw, 1.18rem); font-weight: 300; line-height: 1.65; } .ab-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .ab-sec { position: relative; display: grid; grid-template-columns: 150px minmax(0, 700px); justify-content: center; gap: 40px; padding: 62px 0 8px; } .ab-sec + .ab-sec { border-top: 1px solid rgba(243,241,232,.07); } .ab-mark { position: sticky; top: 118px; align-self: start; } .ab-n { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 3.6rem; font-weight: 800; line-height: .9; color: transparent; -webkit-text-stroke: 1px rgba(243,182,63,.42); letter-spacing: -.04em; } .ab-mark span { display: block; margin-top: 12px; color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; line-height: 1.6; } .ab-body { max-width: none; } .ab-body h2 { font-size: clamp(1.65rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.06; color: #f3f1e8; } .ab-body h2 em { font-style: normal; color: #f3b63f; } .ab-body p { margin-top: 18px; color: #e6d7b8; font-size: 1rem; line-height: 1.75; } .ab-body p.small { color: #a99f8a; font-size: .92rem; } .ab-pull { margin: 30px 0 4px; padding: 24px 26px; border-left: 2px solid #f3b63f; border-radius: 0 16px 16px 0; background: linear-gradient(90deg, rgba(243,182,63,.09), rgba(243,182,63,0) 70%); } .ab-pull b { display: block; color: #f3f1e8; font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.4; } .ab-pull span { display: block; margin-top: 8px; color: #a99f8a; font-size: .88rem; line-height: 1.6; } .ab-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 1px; background: rgba(243,241,232,.07); border: 1px solid rgba(243,241,232,.07); border-radius: 16px; overflow: hidden; } .ab-steps li { display: grid; grid-template-columns: 104px 1fr; gap: 20px; padding: 20px 22px; background: #0a0c0a; align-items: baseline; } .ab-steps u { text-decoration: none; color: #f3b63f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .ab-steps b { display: block; color: #f3f1e8; font-size: .98rem; font-weight: 700; margin-bottom: 5px; } .ab-steps p { margin: 0; color: #a99f8a; font-size: .88rem; line-height: 1.6; } .ab-mail { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 14px 20px; border-radius: 999px; border: 1px solid rgba(243,182,63,.35); background: rgba(243,182,63,.07); color: #f3b63f !important; font-weight: 700; font-size: .92rem; text-decoration: none; transition: background .25s, color .25s; } .ab-mail:hover { background: #f3b63f; color: #080b09 !important; } @media (max-width: 1040px) { .ab-hero { grid-template-columns: 1fr; gap: 38px; } .ab-top { max-width: none; } } @media (max-width: 880px) { .ab-sec { grid-template-columns: 1fr; justify-content: stretch; gap: 18px; padding-top: 44px; } .ab-mark { position: static; display: flex; align-items: baseline; gap: 16px; } .ab-mark span { margin-top: 0; } .ab-n { font-size: 2.4rem; } .ab-inner { padding: 64px 20px 90px; } } @media (max-width: 520px) { .ab-figs { grid-template-columns: 1fr; } } /* ========================================================================= HELP. Not the Kiwi's tower: the view out the window on a long outback leg - the survey grid, a sticky band index, answers set as a document. ========================================================================= */ .hp { position: relative; overflow: hidden; background: #080b09; } .hp-grid-bg { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(243,182,63,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(243,182,63,.055) 1px, transparent 1px); background-size: 118px 118px; -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 0%, transparent 78%); mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 0%, transparent 78%); } .hp-track { position: absolute; inset: 0; pointer-events: none; } .hp-track svg { position: absolute; top: 0; left: 0; width: 100%; height: 420px; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 32%, #000 52%); mask-image: linear-gradient(90deg, transparent 0%, transparent 32%, #000 52%); } .hp-track .leg { fill: none; stroke: rgba(243,182,63,.3); stroke-width: 1.4; stroke-dasharray: 9 8; } .hp-track .wp { fill: none; stroke: rgba(243,182,63,.55); stroke-width: 1.4; } .hp-track .wpf { fill: #f3b63f; } .hp-inner { position: relative; z-index: 2; max-width: 74rem; margin: 0 auto; padding: 84px 24px 110px; } .hp-head { max-width: 46ch; } .hp-h1 { margin-top: 16px; font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #f3f1e8; } .hp-h1 em { font-style: normal; color: #f3b63f; } .hp-sub { margin-top: 20px; max-width: 52ch; color: #a99f8a; font-size: 1.04rem; font-weight: 300; line-height: 1.65; } .hp-search { position: relative; margin: 34px 0 0; max-width: 520px; } .hp-head, .hp-search, .hp-hits { max-width: 64rem; margin-left: auto; margin-right: auto; } .hp-search input { width: 100%; padding: 17px 52px 17px 20px; border-radius: 14px; border: 1px solid rgba(243,241,232,.12); background: rgba(0,0,0,.5); color: #f3f1e8; font-size: .96rem; transition: border-color .2s, box-shadow .2s; } .hp-search input::placeholder { color: #574f41; } .hp-search input:focus { outline: none; border-color: #f3b63f; box-shadow: 0 0 0 4px rgba(243,182,63,.1); } .hp-search svg { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: #574f41; pointer-events: none; } .hp-hits { margin-top: 12px; min-height: 18px; color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .hp-cols { max-width: 64rem; margin: 30px auto 0; } /* The index is one quiet line, not a row of boxes duplicating the headings below it. */ .hp-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 0 2px 4px; } .hp-jump a { display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 10px; border-radius: 9px; color: #a99f8a !important; text-decoration: none; font-size: .86rem; font-weight: 600; transition: background .22s, color .22s; } .hp-jump a:hover { background: rgba(243,182,63,.09); color: #f3b63f !important; } .hp-jump a b { color: #574f41; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; } .hp-jump a:hover b { color: #a9853a; } .hp-jump span { color: #2f2b23; } .hp-sec { scroll-margin-top: 110px; } .hp-sec + .hp-sec { margin-top: 40px; } /* The heading of the section you are reading stays under the nav, so the answers never lose their context on a long scroll and the page needs no second index. */ .hp-sec-head { position: sticky; top: 80px; z-index: 6; display: flex; align-items: center; gap: 14px; padding: 15px 4px 13px; margin-bottom: 14px; border-bottom: 1px solid rgba(243,241,232,.1); background: rgba(8,11,9,.93); backdrop-filter: blur(12px); } .hp-sec-head i { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-style: normal; background: rgba(243,182,63,.13); color: #f3b63f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; } .hp-sec-head h3 { color: #f3f1e8; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; } .hp-sec-head em { margin-left: auto; font-style: normal; color: #574f41; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .hp-contact { margin-top: 64px; display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; padding: 34px 34px 32px; border-radius: 24px; border: 1px solid rgba(243,182,63,.3); background: linear-gradient(120deg, rgba(243,182,63,.1), rgba(10,11,9,.7) 60%); } .hp-contact b { display: block; color: #f3f1e8; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; } .hp-contact p { margin-top: 8px; color: #a99f8a; font-size: .92rem; } @media (max-width: 760px) { .hp-contact { grid-template-columns: 1fr; } .hp-inner { padding: 60px 20px 90px; } .hp-jump { gap: 2px; } .hp-jump a { font-size: .8rem; padding: 5px 8px; } } /* ---- Exam centre: a map of the page, and a hand-off to the bundles ---- */ .ex-map { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; max-width: 74rem; margin: 30px auto 0; padding: 0 24px; } .ex-map span, .ex-map a { display: inline-flex; align-items: center; gap: 10px; color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: color .25s; } .ex-map a:hover { color: #f3b63f; } .ex-map i { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-style: normal; border: 1px solid rgba(243,241,232,.14); background: rgba(243,241,232,.04); color: #a99f8a; font-size: 10px; } .ex-map-on { color: #f3f1e8 !important; } .ex-map-on i { border-color: rgba(243,182,63,.55); background: rgba(243,182,63,.14); color: #f3b63f; } .ex-map-l { width: 26px; height: 1px; background: rgba(243,241,232,.14); } @media (max-width: 620px) { .ex-map-l { display: none; } } .no-code { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(243,241,232,.12); text-align: center; } .no-code > span { display: block; color: #7c745f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } .no-code-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; } .no-code-row button { display: flex; align-items: baseline; justify-content: center; gap: 7px; padding: 11px 6px; border-radius: 11px; border: 1px solid rgba(243,241,232,.12); background: rgba(243,241,232,.03); color: #e6d7b8; cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; transition: border-color .2s, background .2s, color .2s; } .no-code-row button:hover { border-color: #f3b63f; background: rgba(243,182,63,.1); color: #f3b63f; } .no-code-row b { color: #f3b63f; font-size: 1.05rem; font-weight: 900; } .no-code-row button:hover b { color: #ffd87a; } .no-code-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: #a99f8a !important; font-size: .8rem; text-decoration: none; transition: color .25s; } .no-code-more svg { width: 14px; height: 14px; animation: nudge 2.4s ease-in-out infinite; } .no-code-more:hover { color: #f3b63f !important; } @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } /* ---- The reference drawer: what you would otherwise have to own ---- */ .ref-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 10px; cursor: pointer; border: 1px solid rgba(243,182,63,.3); background: rgba(243,182,63,.07); color: #f3b63f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; transition: background .2s, border-color .2s, color .2s; } .ref-btn svg { width: 14px; height: 14px; } .ref-btn:hover { background: #f3b63f; border-color: #f3b63f; color: #080b09; } .ref-wrap { position: fixed; inset: 0; z-index: 120; } .ref-scrim { position: absolute; inset: 0; background: rgba(5,6,5,.72); backdrop-filter: blur(4px); animation: ov-fade .2s ease both; } .ref-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); display: flex; flex-direction: column; border-left: 1px solid rgba(243,182,63,.25); background: linear-gradient(180deg, #14120d, #0a0b09 40%); box-shadow: -30px 0 90px rgba(0,0,0,.7); animation: ref-in .32s cubic-bezier(.16,.84,.44,1) both; } @keyframes ref-in { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } } .ref-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 26px 26px 20px; border-bottom: 1px solid rgba(243,241,232,.08); } .ref-kick { display: block; color: #f3b63f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; } .ref-top p { margin-top: 10px; max-width: 42ch; color: #7c745f; font-size: .8rem; line-height: 1.55; } .ref-x { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid rgba(243,241,232,.12); background: rgba(243,241,232,.04); color: #a99f8a; transition: background .2s, color .2s; } .ref-x svg { width: 15px; height: 15px; } .ref-x:hover { background: rgba(243,241,232,.12); color: #f3f1e8; } .ref-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 26px 34px; } .ref-sec { padding: 22px 0 6px; border-bottom: 1px solid rgba(243,241,232,.06); } .ref-sec:last-child { border-bottom: 0; } .ref-sec-head { margin-bottom: 12px; } .ref-sec-head h4 { color: #f3f1e8; font-size: 1rem; font-weight: 800; letter-spacing: -.015em; } .ref-sec-head span { display: block; margin-top: 4px; color: #574f41; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .ref-row { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; padding: 9px 0; border-top: 1px solid rgba(243,241,232,.04); } .ref-row dt { color: #a99f8a; font-size: .84rem; line-height: 1.45; } .ref-row dd { margin: 0; color: #f3f1e8; font-size: .84rem; line-height: 1.45; font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .ref-row { grid-template-columns: 1fr; gap: 3px; } .ref-panel { width: 100%; } .ref-body { padding: 8px 20px 30px; } }