/* Theme 2.0 (2.5.0): the front page laid out like Google's. The owner, 2026-10-23: "I WANT THE FRONT PAGE TO MIMIC THE GOOGLE FRONT PAGE DESIGN MORE MEANING MOVE ALL OUR INPUT BOX AND TITLES TO CENTER WITH THE BUTTON UNDERNEATH", then: "FOR DESIGN 2.0 KEEP OUR NEOBRUTE STUFF WE'RE NOT CHANGING THE LOOK JUST THE LOGIC, GET IT????????". So this file only moves things: the links top right, the logo big in the middle, the box and its two buttons centered under it, a bar at the bottom. Every border, shadow, font, color and button is app.css's, site.css's and brand.css's own, as on the classic. Linked only while the server serves Theme 2.0 (HQ's front_theme, or ?theme=2), and only for the start screen: a chat or a page open looks exactly as before. */ /* No poster scaling: the page at its own size, like Google's (app.js still works the scale out; this wins over it). */ :root[data-front="2"] { --z: 1 !important; } :root[data-front="2"]:has(#start:not([hidden])) .top, :root[data-front="2"]:has(#start:not([hidden])) .stage > .chat { zoom: 1; } /* ---- the top row: the code box, then Ask at the far right, as the classic has them (2.6.1, PD-507: the links are in the bottom bar; HQ's front_top_links puts Pricing and Free audit back before them) */ :root[data-front="2"]:has(#start:not([hidden])) .top { justify-content: flex-end; flex-wrap: wrap; } :root[data-front="2"]:has(#start:not([hidden])) .top .mark, :root[data-front="2"]:has(#start:not([hidden])) .top .tag { display: none; } /* the logo is the big one below; the tagline is in the bottom bar */ :root[data-front="2"]:has(#start:not([hidden])) .top .y-nav { order: 1; display: flex; } :root[data-front="2"]:has(#start:not([hidden])) .top .go { order: 2; margin-left: 0; } :root[data-front="2"]:has(#start:not([hidden])) .top .talk-btn { order: 3; } :root[data-front="2"]:has(#start:not([hidden])) .top .net { order: 4; } :root[data-front="2"]:has(#start[hidden]) .top .y-nav { display: none; } /* a chat's header stays the classic one */ /* ---- the middle: the logo, the box, the two buttons under it, all centered */ :root[data-front="2"]:has(#start:not([hidden])) .stage { padding-top: 0; } :root[data-front="2"]:has(#start:not([hidden])) .stage > .chat { justify-content: center; } :root[data-front="2"] .start { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6vh 0 4vh; } :root[data-front="2"] .start .t2-logo { display: inline-block; margin: 0 0 22px; font-size: 112px; line-height: 1; letter-spacing: .02em; } :root[data-front="2"] .start .t2-logo .sticker { font-size: 20px; vertical-align: 52px; } /* The headline "y00r ugly fix it!" is the logo now: it stays for screen readers and search. A headline of other words (a personal link's "Where is your website?", y00r.com/first's) shows, centered under the logo. */ :root[data-front="2"] .start h1:has(.eye) { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :root[data-front="2"]:has(#start:not([hidden])) .start h1 { margin: 0 0 10px; font-size: 40px; } :root[data-front="2"]:has(#start:not([hidden])) .start .lede, :root[data-front="2"]:has(#start:not([hidden])) #start-p { margin: 0 0 22px; max-width: 40em; } /* 2.6.22 (PD-540, the owner, 2026-10-24: "UNDER Y00R LOGO IT SAYS PASTE YOUR WEBSITE BLAH BLAH, NO, REMOVE ALL THE TEXT BELOW THE MAIN LOGO THERE SHOULD BE LOGO THEN INPUT URL TEXTBOX."): with the headline as the logo, its line goes too (kept for screen readers and search, as the headline is); a page with a headline of its own keeps both. */ :root[data-front="2"] .start h1:has(.eye) + #start-p { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :root[data-front="2"] .clone { justify-content: center; width: 100%; max-width: 760px; margin: 0 auto; gap: 16px 18px; } :root[data-front="2"] .clone input { flex: 1 1 100%; } :root[data-front="2"] .clone button { flex: 0 0 auto; } :root[data-front="2"] .start .first-hint, :root[data-front="2"] .start .code-on, :root[data-front="2"] .start .url-note, :root[data-front="2"] .start .lucky-note { margin-left: auto; margin-right: auto; max-width: 760px; } :root[data-front="2"] .mine { justify-content: center; margin-top: 18px; } :root[data-front="2"] .steps { width: 100%; margin-left: auto; margin-right: auto; text-align: left; } :root[data-front="2"] .start.t2-fold .steps { display: none; } /* "How it works" in the bottom bar opens them (front2.js) */ :root[data-front="2"] .start #how:target ~ .steps, :root[data-front="2"] .start.t2-fold.t2-open .steps { display: grid; } /* 2.5.7, the owner: "HOW IT WORKS USED TO OPEN THE BOXES WITHOUT CAUSING THE SCREEN SIZE TO CHANGE AND CAUSE SCROLL BARS AND ELEMENTS TO SHIFT". Opened from the bar, the three steps are a layer over the page, just above the bar (front2.js puts its bottom there): fixed, so the page keeps its height, gets no scroll bar and nothing under it moves. Same boxes as ever. */ :root[data-front="2"] .start.t2-fold.t2-open .steps { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: var(--t2-how-bottom, 72px); width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - var(--t2-how-bottom, 72px) - 16px); overflow-y: auto; margin: 0; padding: 12px; background: var(--ink); border: 2px solid var(--paper); box-shadow: 6px 6px 0 var(--hot); } @media (max-width: 640px) { :root[data-front="2"] .start.t2-fold.t2-open .steps { grid-template-columns: 1fr; } } /* I'm Feeling Lucky: one of y00r's own buttons, the paper one (the chat's Copy, Go and Fix another wear it): paper, ink words, the lime shadow. Its last word spins under the mouse (front2.js); its width stays put while it does. */ :root[data-front="2"] .clone button.lucky { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 5px 5px 0 var(--hot); white-space: nowrap; } :root[data-front="2"] .clone button.lucky:hover { box-shadow: 6px 6px 0 var(--hot); } .lucky .feel { display: inline-block; overflow: hidden; vertical-align: bottom; } .lucky .feel > span { display: inline-block; } .lucky .feel > span.roll { animation: feel-roll .09s ease-out 1; } @keyframes feel-roll { from { transform: translateY(-80%); opacity: .2; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .lucky .feel > span.roll { animation: none; } } .start .lucky-note { margin: 14px 0 0; padding: 9px 12px; border: 2px solid var(--hot); color: var(--paper); } /* ---- the bottom bar (Google's two rows): the tagline, then the links at the left and the right, then y00r's small print. Its look is site.css's footer (.y-foot) and app.css's thin line (.y-foot0), across the whole width. */ :root[data-front="2"] body:has(> .t2-foot) { padding-bottom: 0; } .y-foot.t2-foot { flex: none; margin: 8px calc(-1 * max(16px, env(safe-area-inset-right))) 0 calc(-1 * max(16px, env(safe-area-inset-left))); padding: 0; max-width: none; text-align: left; } .t2-foot .t2-where { margin: 0; padding: 5px 24px; border-bottom: 2px solid var(--line); color: var(--mute); } .t2-foot .t2-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 24px; padding: 3px 24px; } /* (2.6.15, PD-535: tight) */ .t2-foot .t2-row nav { display: flex; flex-wrap: wrap; gap: 4px 24px; } .t2-foot .t2-row .t2-right { margin-left: auto; } /* (2.5.1: Plans and Ask stay at the right with the left row's links all off) */ :root[data-front="2"]:has(#start) .t2-foot .y-foot.y-foot0 { margin: 0; } /* 2.6.21 (PD-539, the owner, 2026-10-24: "THE BOTTOM FOOTER SHOULD NOT HAVE THAT DOUBLE GRAY LINE DOWN THERE WITH THE DOUBLE FOOTER SECTIONS"), 2.6.23 (PD-541: "YOU REMOVED THE WRONG GRAY LINE AND LEFT THE WRONG GRAY LINE"): on the front page no line over the links; the one line is between the links and y00r's line. */ :root[data-front="2"]:has(#start:not([hidden])) .y-foot.t2-foot { border-top: 0; } /* 2.5.4, the tagline typed (front2.js): the typed line and a ghost of the tallest line in one grid cell, so the bar keeps its height whatever is typed; the cursor a lime block, steady while typing, blinking while a line holds. */ .t2-foot #t2-typer .ty { display: grid; } .t2-foot #t2-typer .ty > span { grid-area: 1 / 1; align-self: start; } .t2-foot #t2-typer .ty-ghost { visibility: hidden; } .t2-foot #t2-typer .ty-ghost::after, .t2-foot #t2-typer .ty-cur { content: ''; display: inline-block; width: .6em; height: 1.1em; margin-left: 2px; vertical-align: text-bottom; } .t2-foot #t2-typer .ty-cur { background: var(--hot); } .t2-foot #t2-typer.ty-blink .ty-cur { animation: ty-blink 1.05s steps(1) infinite; } .t2-foot #t2-typer.ty-calm .ty-cur { display: none; } @keyframes ty-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .t2-foot #t2-typer .ty-cur { display: none; } } :root[data-front="2"]:has(#start[hidden]) .t2-foot .t2-where, :root[data-front="2"]:has(#start[hidden]) .t2-foot .t2-row { display: none; } /* a chat or a page open: only the thin line, as before */ :root[data-front="2"]:has(#start[hidden]) .y-foot.t2-foot { margin-top: auto; border-top: 0; } /* A phone (Google's own phone page): any links at the left of the top row, the code and Ask at the right; the logo smaller; the buttons one under the other, the whole width (as the classic's one button). */ @media (max-width: 700px) { :root[data-front="2"]:has(#start:not([hidden])) .top { justify-content: space-between; } :root[data-front="2"]:has(#start:not([hidden])) .top .y-nav { gap: 0 18px; } :root[data-front="2"]:has(#start:not([hidden])) .top .go { margin-left: auto; } :root[data-front="2"] .start { padding: 5vh 0 3vh; } :root[data-front="2"] .start .t2-logo { font-size: 72px; margin-bottom: 16px; } :root[data-front="2"] .start .t2-logo .sticker { font-size: 15px; vertical-align: 30px; } :root[data-front="2"]:has(#start:not([hidden])) .start h1 { font-size: 32px; } :root[data-front="2"] .clone { gap: 12px; } :root[data-front="2"] .clone button { flex: 1 1 100%; } .t2-foot .t2-where, .t2-foot .t2-row { padding-left: 16px; padding-right: 16px; } .t2-foot .t2-row nav { gap: 0 18px; } } /* A narrow phone: the top row in one line, Pricing (when HQ shows it), the code and Ask (Free audit is one scroll away, in the bottom bar). */ @media (max-width: 479px) { :root[data-front="2"]:has(#start:not([hidden])) .top .y-nav a + a { display: none; } :root[data-front="2"]:has(#start:not([hidden])) .top { gap: 8px; } } @media (max-width: 560px) { .t2-foot .t2-row a { display: inline-flex; align-items: center; min-height: 44px; } /* (2.1.1's 44px targets) */ } /* 2.6.24 (PD-542, the owner, 2026-10-24: "remove the lime outline on the lucky button."): no ring from the page's own focus on load. 2.6.34 (PD-553, the owner: "click to another tab then click back to my tab, lime highlight on lucky button suddenly ... just give that element its own single one unique identifier and give it specific css to not have that highlight border thing ever"): I'm Feeling Lucky, by its own id, never shows the focus ring, however it got the focus. */ #lucky:focus, #lucky:focus-visible { outline: none !important; } /* QA round 7 (2026-10-28, keyboard users): a Tab's own cue on it, in the page's ink inside the button, never the lime ring. :root.kb comes with a Tab key and goes with any mouse or finger (app.js), so a click, the page's own focus on load and a tab switched back show nothing. */ :root.kb #lucky:focus-visible { outline: 3px solid var(--ink) !important; outline-offset: -7px !important; } /* 2.6.26 (PD-544): with the box's lines playing (front2.js), "No website yet?" pulses while an example shows and is invisible, in its place, while a line is typed; without the script, or with reduced motion, it stays as before. 2.6.27 (PD-545, the owner, 2026-10-24: "IT SHOULD FADE TO COMPLETE NOTHING AND ALSO WHEN IT RESTARTS IT SHOULD RESTART AND ALWAYS START FROM NOTHING FULL FADE TO FADING IN", then "WHEN THE TEXT IS ERASING AND ABOUT TO GO TO URL IT IS FADING OUT AS WELL, FADE IN/FADE OUT, ALL PROPER"): each time an example shows it starts at nothing, fades in and fades out again in the example's own time (front2.js sets --hint-half to half of it), so it is at nothing when a line starts typing; while the box rests on the example it goes on, in and out. */ .start .first-hint.ty-hint { visibility: hidden; opacity: 0; } .start .first-hint.ty-hint.ty-ex { visibility: visible; animation: hint-pulse var(--hint-half, 1.2s) ease-in-out infinite alternate; } /* (in, out: one example's time) */ @keyframes hint-pulse { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { /* (and from the first paint, before front2.js runs: never a flash of it at full) */ :root[data-front="2"]:has(#typer-box) .start .first-hint:not(.ty-ex) { visibility: hidden; opacity: 0; } } /* 2.6.28 (PD-546, the owner, 2026-10-24: "WHEN THE Y00R LOGO BLINKS WHEN IT'S DONE WITH THE BLINK THE UGLY FIX IT! NEXT TO IT SHOULD GIVE THE USER A LITTLE SHAKE, AND THEN THE ANIMATION "LOOP" STARTS OVER"): the big logo's sticker shakes right after each blink. Same 6.5 s loop as the eyes (app.css's blink: shut at 95%, open again at 100%), started one loop late, so its shake (the first 0.6 s of its loop) begins the moment the eyes open; then both go round again. */ :root[data-front="2"] .start .t2-logo .sticker { animation: sticker-shake 6.5s 6.5s infinite; } @keyframes sticker-shake { 0%, 9%, 100% { transform: rotate(-5deg); } 1.5% { transform: translateX(-3px) rotate(-9deg); } 3% { transform: translateX(3px) rotate(-1deg); } 4.5% { transform: translateX(-3px) rotate(-8deg); } 6% { transform: translateX(2px) rotate(-2deg); } 7.5% { transform: translateX(-1px) rotate(-6deg); } } @media (prefers-reduced-motion: reduce) { :root[data-front="2"] .start .t2-logo .sticker { animation: none; } } /* 2.6.29 (PD-547): HQ's switches for the loop's parts (server.py: ). Off: blink, the eyes still; shake, the sticker still; hint, "No website yet?" shown still, as before 2.6.26. */ :root[data-no~="blink"] .eye { animation: none; } :root[data-front="2"][data-no~="shake"] .start .t2-logo .sticker { animation: none; } /* 2.6.30 (PD-549): the keystroke shake moves "Fix my ugly" by its own translate/rotate/scale (front2.js), from its middle */ :root[data-front="2"] #clone-go { transform-origin: 50% 60%; will-change: translate, rotate; } :root[data-front="2"][data-no~="hint"] .start .first-hint { visibility: visible !important; opacity: 1 !important; animation: none !important; } /* 2.6.33 (PD-552, the deep QA sweep: the bottom bar's "Ask" was 25 px wide to tap on a phone): a phone's tap reaches 40 px around each of the bar's links, an invisible layer, so the tight bar does not grow */ @media (max-width: 700px), (pointer: coarse) { .t2-foot .t2-row a { position: relative; } .t2-foot .t2-row a::after { content: ""; position: absolute; inset: -10px -8px; } } /* 4.7.1 (PD-666): the fold fits a phone's screen again: its paddings and gaps shrink with the screen's height, the H1 and the logo a little with it, the footer's top margin goes (app.css brings the lede down one grid step). Measured after: 360x740 and 393x760 no scroll (were 116 and 65 px over); 390x844 and 412x823 unchanged. The words never change. */ @media (max-width: 480px) { :root[data-front="2"] .start { padding: clamp(10px, 2.5vh, 38px) 0 clamp(8px, 2vh, 23px); } :root[data-front="2"] .start .t2-logo { font-size: clamp(56px, 9vh, 72px); margin-bottom: clamp(6px, 1.5vh, 16px); } :root[data-front="2"] .start .t2-logo .sticker { font-size: 13px; vertical-align: 24px; } :root[data-front="2"]:has(#start:not([hidden])) .start h1 { font-size: clamp(24px, 3.6vh, 32px); line-height: 1.1; margin-bottom: clamp(6px, 1.2vh, 10px); } :root[data-front="2"]:has(#start:not([hidden])) .start .lede, :root[data-front="2"]:has(#start:not([hidden])) #start-p { margin-bottom: clamp(10px, 2vh, 22px); } :root[data-front="2"] .start .first-hint { margin-top: clamp(6px, 1.2vh, 12px); } :root[data-front="2"] .y-foot.t2-foot { margin-top: 0; } }