/* PEpracticehub - preview. Extracted from the page so the browser can be told to refuse inline styles and scripts. */ img{max-width:100%}[hidden]{display:none!important} :root{ --bg:#F5F7FB; --surface:#FFFFFF; --surface-2:#EDF1F8; --ink:#0F1B33; --muted:#56637A; --line:#D9E0EC; --blue:#1E3F8A; --blue-deep:#12295F; --blue-soft:#E4EAF8; --blue-text:#1E3F8A; --amber:#F5A524; --amber-ink:#1A1300; --amber-soft:#FFF1D6; --grid:rgba(30,63,138,.09); --shadow:0 20px 50px -20px rgba(18,41,95,.25); --ok:#1D9A6C; --warn:#D97706; --bad:#C2410C; --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif; --body:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif; --mono:"IBM Plex Mono",Consolas,"Courier New",monospace; color-scheme:light; } /* The page follows the reader's device. A phone set to dark mode gets the dark palette; everything else stays on Paper. An explicit choice always wins over the device, in either direction. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0A1226; --surface:#111B36; --surface-2:#182448; --ink:#EEF2FA; --muted:#9AA7C2; --line:#24325A; --blue:#6F8FE0; --blue-deep:#1E3F8A; --blue-soft:#182448; --blue-text:#9DB4F0; --amber:#FFB53B; --amber-ink:#1A1300; --amber-soft:#3A2B0C; --grid:rgba(111,143,224,.10); --shadow:0 20px 50px -20px rgba(0,0,0,.6); --ok:#3DD598; --warn:#FBBF24; --bad:#FB923C; color-scheme:dark; } } :root[data-theme="dark"]{ --bg:#0A1226; --surface:#111B36; --surface-2:#182448; --ink:#EEF2FA; --muted:#9AA7C2; --line:#24325A; --blue:#6F8FE0; --blue-deep:#1E3F8A; --blue-soft:#182448; --blue-text:#9DB4F0; --amber:#FFB53B; --amber-ink:#1A1300; --amber-soft:#3A2B0C; --grid:rgba(111,143,224,.10); --shadow:0 20px 50px -20px rgba(0,0,0,.6); --ok:#3DD598; --warn:#FBBF24; --bad:#FB923C; color-scheme:dark; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden} .hero{position:relative;overflow-x:clip} .hero::before{content:"";position:absolute;left:-10%;right:-10%;top:-30%;height:120%;pointer-events:none;z-index:0; background:radial-gradient(55% 60% at 72% 28%,color-mix(in srgb,var(--blue) 16%,transparent),transparent 70%),radial-gradient(35% 40% at 12% 80%,color-mix(in srgb,var(--amber) 10%,transparent),transparent 70%)} .hero-hex{position:absolute;right:-8%;top:-14%;width:min(58vw,760px);height:auto;color:var(--blue);opacity:.06;pointer-events:none;z-index:0;transform:rotate(-12deg)} .hero .wrap{position:relative;z-index:1} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} :focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px} h1,h2,h3{font-family:var(--display);line-height:.95;margin:0;text-wrap:balance;letter-spacing:-.01em} h1{font-size:clamp(48px,7.2vw,104px);font-weight:800;text-transform:uppercase} h2{font-size:clamp(38px,5vw,68px);font-weight:800;text-transform:uppercase} h3{font-size:26px;font-weight:700} p{margin:0} .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-text);display:inline-flex;align-items:center;gap:10px} .eyebrow::before{content:"";width:22px;height:2px;background:var(--amber)} .lede{font-size:18px;color:var(--muted);max-width:56ch} .wrap{position:relative;z-index:1;width:min(1180px,calc(100% - 40px));margin:0 auto} section{padding:96px 0} .section-head{display:grid;gap:14px;margin-bottom:48px;max-width:720px} /* buttons */ .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:8px;font-weight:600;font-size:15px;border:1.5px solid transparent;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap} .btn:hover{transform:translateY(-2px)} .btn-amber{background:var(--amber);color:var(--amber-ink);box-shadow:0 10px 24px -10px rgba(245,165,36,.7)} .btn-blue{background:var(--blue-deep);color:#fff} .btn-ghost{border-color:var(--line);background:var(--surface);color:var(--ink)} .btn svg{width:16px;height:16px} /* nav */ nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .nav-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px} .logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:.01em;text-transform:none} .logo b{font-weight:800;color:var(--blue-text)} .logo em{font-style:normal;font-weight:800;color:var(--amber)} .logo svg{width:34px;height:34px} .nav-links{display:flex;gap:28px;font-weight:500;font-size:15px;color:var(--muted)} .nav-links a:hover{color:var(--ink)} .nav-cta{display:flex;gap:10px;align-items:center} .nav-cta .btn{padding:10px 16px;font-size:14px} @media (max-width:520px){.nav-in{gap:12px}.nav-in .logo{font-size:22px}.nav-cta{gap:8px}.nav-cta .btn{padding:9px 12px}} @media (max-width:860px){.nav-links{display:none}} /* hero */ .hero{padding:72px 0 56px;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} @media (max-width:960px){.hero-grid{grid-template-columns:1fr}} .hero h1 span{display:block} /* The small line above the big words is part of the h1 on purpose: it carries the phrase people search, "PE Civil: Construction practice exam questions", which the headline itself does not. It looks exactly like an eyebrow. */ .hero h1 .eyebrow{display:flex;font-size:12px;font-weight:400;line-height:1.4;margin-bottom:26px} .hero h1 .accent{color:var(--blue-text)} .hero h1 .accent-2{color:var(--amber)} .hero-copy{display:grid;gap:26px} .hero-ctas{display:flex;gap:12px;flex-wrap:wrap} /* The way onto a phone home screen. Shown at every width; it matters most on a phone, where the header links are hidden. */ .app-strip{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:var(--blue-soft);color:var(--ink);text-decoration:none;border:1px solid transparent;transition:border-color .2s;max-width:30rem} .app-strip:hover{border-color:var(--blue)} .app-strip svg{width:24px;height:24px;flex:none;color:var(--blue-text)} .app-strip span{font-size:14px;flex:1} .app-strip b{color:var(--blue-text)} .app-strip i{font-style:normal;font-size:20px;color:var(--blue-text)} .hero-note{font-family:var(--mono);font-size:12px;color:var(--muted)} .rise{animation:rise .8s cubic-bezier(.2,.8,.2,1) both} .rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.18s}.rise.d3{animation-delay:.28s}.rise.d4{animation-delay:.38s} @keyframes rise{from{opacity:.001;transform:translateY(22px)}to{opacity:1;transform:none}} /* exam blueprint card */ .blueprint{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px 22px 18px;position:relative;overflow:hidden;animation:floatIn 1s cubic-bezier(.2,.8,.2,1) both .2s} @keyframes floatIn{from{opacity:.001;transform:translateY(30px) rotate(-1deg)}to{opacity:1;transform:none}} .blueprint::after{content:"";position:absolute;left:0;right:0;height:2px;top:0;background:linear-gradient(90deg,transparent,var(--amber),transparent);animation:scan 4s ease-in-out infinite} @keyframes scan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}} .bp-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;gap:12px} .bp-title{font-family:var(--display);font-size:22px;font-weight:700;text-transform:uppercase} .bp-tag{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase} .bp-row{display:grid;grid-template-columns:22px 1fr 58px;align-items:center;gap:10px;padding:5px 0;font-size:13px} .bp-row .lbl{display:flex;flex-direction:column;gap:4px;min-width:0} .bp-row .n{font-family:var(--mono);font-size:11px;color:var(--muted)} .bp-row .name{font-weight:500} .bp-row .rng{font-family:var(--mono);font-size:12px;text-align:right;font-variant-numeric:tabular-nums} .bp-legend{display:flex;gap:16px;margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--muted)} .bp-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px} .track{height:7px;background:var(--surface-2);border-radius:99px;overflow:hidden;position:relative} .track i{position:absolute;top:0;bottom:0;left:0;border-radius:99px;background:var(--blue);width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1)} .track b{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--amber);opacity:.85;width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1) .2s} /* stats strip */ /* ticker */ .ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);padding:14px 0;overflow:hidden;position:relative;z-index:1} .ticker-in{display:flex;gap:56px;width:max-content;animation:ticker 40s linear infinite} .ticker:hover .ticker-in{animation-play-state:paused} @keyframes ticker{to{transform:translateX(-50%)}} .ticker span{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--muted);display:flex;align-items:center;gap:14px;white-space:nowrap} .ticker span::before{content:"";width:6px;height:6px;background:var(--amber);transform:rotate(45deg)} /* planner */ .planner{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:36px;box-shadow:var(--shadow)} @media (max-width:860px){.planner{grid-template-columns:1fr;padding:26px}} .planner-copy{display:grid;gap:14px} .planner-copy h2{font-size:clamp(34px,4vw,54px)} .time-picks{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px} .time-picks button{border:1.5px solid var(--line);background:var(--bg);border-radius:10px;padding:12px 18px;font-family:var(--display);font-size:22px;font-weight:700;color:var(--muted);transition:all .2s} .time-picks button:hover{border-color:var(--blue);color:var(--ink)} .custom-min{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--muted)} .custom-min input{width:96px;font-family:var(--display);font-size:22px;font-weight:700;padding:8px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)} .custom-min input:focus{outline:none;border-color:var(--blue)} .custom-min input.on{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff} .custom-min select{font:inherit;font-size:15px;padding:11px 10px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)} .custom-min select:focus{outline:none;border-color:var(--blue)} .planner-out.stale{opacity:.4;transition:opacity .2s} .planner-out.stale .plan-cta{pointer-events:none} .custom-min em{flex-basis:100%;font-style:normal;font-size:13px;color:var(--bad)} .time-picks button.on{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;transform:translateY(-2px)} .planner-out{display:grid;gap:10px} .plan-line{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 16px;border-radius:12px;background:var(--surface-2);animation:rise .4s both} .plan-line:nth-child(2){animation-delay:.06s}.plan-line:nth-child(3){animation-delay:.12s}.plan-line:nth-child(4){animation-delay:.18s} .plan-line .big{font-family:var(--display);font-size:34px;font-weight:800;line-height:1;min-width:64px;font-variant-numeric:tabular-nums;color:var(--blue-text)} .plan-line .big.amber{color:var(--amber)} .plan-line .t{font-size:14px} .plan-line .t b{display:block;font-size:15px} .plan-line .t span{color:var(--muted);font-size:13px} .plan-cta{margin-top:6px;justify-self:start} /* disciplines */ /* One exam is open, so the grid holds one card and lets it breathe rather than stranding it in a row of four empty columns. */ .disc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px} @media (max-width:960px){.disc-grid{grid-template-columns:repeat(2,1fr)}} .disc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:grid;gap:12px;position:relative;transition:transform .25s,box-shadow .25s,border-color .25s;min-height:190px} .disc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blue)} .disc.live{border-color:var(--blue);background:linear-gradient(160deg,var(--blue-soft),var(--surface) 70%)} .disc .pill{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:99px;background:var(--surface-2);color:var(--muted)} .disc.live .pill{background:var(--amber);color:var(--amber-ink)} .disc.live .pill::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber-ink);margin-right:6px;animation:pulse 1.6s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} .disc h3{font-size:28px} .disc .sub{font-size:13px;color:var(--muted)} .disc svg{width:36px;height:36px;color:var(--blue-text)} .disc-more{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--muted)} .chip{font-family:var(--mono);font-size:12px;padding:6px 12px;border-radius:99px;border:1px dashed var(--line);color:var(--muted)} .feat-copy p b,.faq .a b{color:var(--ink)} /* course map */ .map{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start} @media (max-width:960px){.map{grid-template-columns:1fr}} .mod-list{display:grid;gap:8px} .mod{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .2s,transform .2s;text-align:left;color:inherit;width:100%} .mod:hover,.mod.active{border-color:var(--blue);transform:translateX(4px)} .mod.active{background:var(--blue-soft)} .mod .num{font-family:var(--mono);font-size:12px;color:var(--muted)} .mod .t{font-weight:600;font-size:15px} .mod .w{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .mod-detail{position:sticky;top:90px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;display:grid;gap:18px;box-shadow:var(--shadow)} .mod-detail h3{font-size:34px} .mod-detail .meta{display:flex;gap:18px;font-family:var(--mono);font-size:12px;color:var(--muted)} .mod-detail .meta b{color:var(--ink);font-weight:500} .mod-detail ul{margin:0;padding:0;list-style:none;display:grid;gap:8px} .mod-detail li{display:flex;gap:10px;font-size:14px;align-items:flex-start} .mod-detail li::before{content:"";flex:none;width:8px;height:8px;margin-top:7px;background:var(--amber);transform:rotate(45deg)} .mod-detail .bar{height:10px;background:var(--surface-2);border-radius:99px;overflow:hidden} .mod-detail .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--amber));transition:width .6s cubic-bezier(.2,.8,.2,1)} /* feature showcase */ .feat{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center} .feat.flip{grid-template-columns:1.1fr .9fr} .feat.flip .feat-copy{order:2} @media (max-width:960px){.feat,.feat.flip{grid-template-columns:1fr}.feat.flip .feat-copy{order:0}} .feat-copy{display:grid;gap:16px} /* A grid column is as wide as its widest unbreakable content unless told otherwise, and the dashboard beside this copy was widening both. */ .feat>*{min-width:0} .feat-copy h3{font-size:42px;text-transform:uppercase} .feat-copy p{color:var(--muted);max-width:44ch} .feat-list{display:grid;gap:8px;font-size:15px} .feat-list div{display:flex;gap:10px;align-items:center} .feat-list svg{width:18px;height:18px;color:var(--ok);flex:none} .feat + .feat{margin-top:88px} .qcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden} .qbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--muted)} .qbar .timer{color:var(--ink);font-variant-numeric:tabular-nums} .qbody{padding:22px} .qtext{font-size:15px;line-height:1.6;margin-bottom:16px} .opts{display:grid;gap:8px} .opt{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);text-align:left;color:inherit;font-size:14px;transition:border-color .15s,background .15s;width:100%} .opt:hover{border-color:var(--blue)} .opt .k{font-family:var(--mono);font-size:12px;color:var(--muted);width:18px} .opt.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--surface))} .opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--surface))} .sol{margin-top:14px;padding:14px 16px;border-left:3px solid var(--amber);background:var(--surface-2);border-radius:0 10px 10px 0;font-size:14px;display:none} .sol.show{display:block;animation:rise .4s both} .sol code{font-family:var(--mono);font-size:13px;background:var(--surface);padding:1px 6px;border-radius:4px} .qfoot{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)} .dash{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px;display:grid;gap:18px} .rings{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .ring{display:grid;justify-items:center;gap:6px;font-size:12px;color:var(--muted);text-align:center} .ring svg{width:74px;height:74px;transform:rotate(-90deg)} @media (max-width:520px){.rings{gap:6px}.ring svg{width:58px;height:58px}} .ring circle{fill:none;stroke-width:7} .ring .bg{stroke:var(--surface-2)} .ring .fg{stroke:var(--blue);stroke-linecap:round;stroke-dasharray:198;stroke-dashoffset:198;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)} .ring .fg.warm{stroke:var(--amber)} .ring .pct{font-family:var(--display);font-size:22px;font-weight:700;color:var(--ink);line-height:1} .dash .row{display:flex;justify-content:space-between;align-items:center;font-size:13px} .spark{height:56px;width:100%} .spark path{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.4s ease-out forwards} .spark .area{fill:var(--blue);opacity:.12;stroke:none;animation:none} @keyframes draw{to{stroke-dashoffset:0}} /* pricing */ /* Four plans: four across on a wide screen, two by two on a tablet, one column on a phone. */ .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch} @media (max-width:1100px){.plans{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.plans{grid-template-columns:1fr}} .plan{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;display:grid;gap:18px;align-content:start;position:relative;transition:transform .25s} .plan:hover{transform:translateY(-6px)} .plan.hot{border:2px solid var(--blue);background:linear-gradient(170deg,var(--blue-soft),var(--surface) 55%)} .plan .badge{position:absolute;top:-13px;left:26px;background:var(--amber);color:var(--amber-ink);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:99px} .plan h3{font-size:30px;text-transform:uppercase} .price{display:flex;align-items:baseline;gap:6px} .price{flex-wrap:wrap} .price .amt{font-family:var(--display);font-size:52px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums} .price .per{color:var(--muted);font-size:14px} .plan ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px} .plan li{display:flex;gap:10px;align-items:flex-start} .plan li svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--ok)} .plan li.no{color:var(--muted)} .plan li.no svg{color:var(--line)} /* faq */ .faq{display:grid;gap:8px;max-width:820px} .faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 20px;transition:border-color .2s} .faq details[open]{border-color:var(--blue)} .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font-weight:600;font-size:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--mono);font-size:22px;color:var(--blue-text);transition:transform .25s} .faq details[open] summary::after{transform:rotate(45deg)} .faq .a{padding:0 0 18px;color:var(--muted);font-size:15px;max-width:64ch} /* final cta */ .final{background:var(--blue-deep);color:#fff;border-radius:24px;padding:72px 48px;display:grid;gap:22px;justify-items:start;position:relative;overflow:hidden} .final::before{content:"";position:absolute;inset:0;background:radial-gradient(45% 70% at 88% 15%,rgba(245,165,36,.28),transparent 70%),radial-gradient(50% 60% at 5% 95%,rgba(255,255,255,.10),transparent 70%)} .final::after{content:"";position:absolute;right:-6%;bottom:-40%;width:420px;height:420px;border:3px solid rgba(255,255,255,.08);border-radius:14px;transform:rotate(30deg);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)} .final>*{position:relative} .final h2{color:#fff;max-width:14ch} .final p{color:#C6D2F2;max-width:46ch;font-size:17px} .final .eyebrow{color:#FFD07A} @media (max-width:700px){.final{padding:48px 24px}} footer{padding:40px 0 60px;color:var(--muted);font-size:13px;position:relative;z-index:1} .foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding-top:28px} .foot .logo{font-size:22px} .foot nav{position:static;background:none;border:0;backdrop-filter:none;display:flex;gap:18px} /* reveal */ .reveal{opacity:1;transform:none} .reveal.pre{opacity:.001;transform:translateY(26px)} .reveal.in{transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important} .reveal.pre{opacity:1;transform:none} } /* Internal navigation bar, pre-launch only. Delete this block and the