/* ========================================================================== Walk with Charlie — home page Implemented from Figma "Home" (18040:23069), a 375 x 1391 mobile frame. All measurements are the Figma pixel values / 16, expressed in rem, so the whole composition scales as one unit with the root font size below. Note on the icon chrome: in Figma the app icon and the two compact store icons carry OUTSIDE strokes, so a 48px icon occupies 53px and a 32px icon occupies 36px. Those strokes are baked into the exported PNGs, which is why the elements below are sized to the outer figure and carry no CSS border. ========================================================================== */ @font-face { font-family: "First Time Writing"; src: url("assets/fonts/first_time_writing/FirstTimeWriting!.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } :root { --ink: #000000; --paper: #ffffff; --band: #e5e5e5; /* the bands' rgba(0,0,0,.1) resolved over white */ /* "First Time Writing!" has a ~1.16 normal line box; pin it so the handwritten headings stack at their designed positions. */ --lh-hand: 1.16; --font-hand: "First Time Writing", "Comic Sans MS", cursive; /* D2Coding ships with the app but not in /assets — fall back to the system mono stack, which keeps the same fixed-width character. */ --font-mono: "D2Coding", "D2Coding ligature", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* The shipped TTF outlines are noticeably lighter than the Figma canvas renders them. This stroke restores the designed marker weight; set it to 0 to fall back to the font's native hairline. */ --hand-weight: 0.08em; /* How far the receptionist is planted past the footer rule. */ --reception-drop: 0.5rem; /* 8 */ } /* Below the 375px design width the page scales down proportionally. Above it the design holds its mobile size — only the header and footer bands stretch to fill the viewport. */ html { font-size: 4.2667vw; } @media (min-width: 375px) { html { font-size: 16px; } } *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: clip; } /* The canvas takes its colour from , and the canvas is what fills the rubber-band area when you overscroll past the top or bottom. Painting it the band grey makes the header and footer read as continuing off-screen instead of ending at a white gap. keeps the white page underneath the content itself. */ html { background: var(--band); } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-mono); /* Nothing on the page is selectable or draggable, so the artwork can't be lifted by dragging or highlighting. This is a deterrent, not a security boundary — the files are still served over HTTP and reachable directly. */ -webkit-user-select: none; user-select: none; } img { display: block; -webkit-user-drag: none; -webkit-touch-callout: none; /* no press-and-hold "Save Image" on iOS */ } /* --------------------------------------------------------------- layout -- */ .page { width: 23.4375rem; /* 375 */ max-width: 100%; margin-inline: auto; display: flex; flex-direction: column; align-items: center; } /* --------------------------------------------------------------- topbar -- */ /* The band fill and its rule are one exported vector — the rule is drawn by hand in the design and wobbles ±1.5px, so it cannot be a CSS border. The band spans the viewport and TILES at its native 375 width rather than stretching, which keeps the hand-drawn wobble at its designed frequency; `center` lands a whole tile on the content column. */ .topbar { width: 100%; height: 7.6875rem; /* 123 */ background: url("assets/band-top.svg") repeat-x center top / auto 100%; } /* The chrome holds the mobile column's width and padding at every viewport. */ .topbar__inner { width: 23.4375rem; /* 375 */ max-width: 100%; height: 100%; margin-inline: auto; padding: 1.8125rem 1.4375rem 0 1.59375rem; /* centres both icon groups on y=76 */ display: flex; align-items: center; justify-content: space-between; } /* These three exports are flattened onto white, so each is clipped to its own outer corner radius — the design radius plus the outside stroke — to stop white squares showing through against the band. */ .topbar__logo { width: 3.3125rem; /* 53 = the 48 icon plus its 2.5 outside stroke */ height: 3.3125rem; border-radius: 0.90625rem; /* 14.5 = 12 + 2.5 */ } .topbar__stores { display: flex; align-items: center; gap: 0.5rem; /* 8 clear between the strokes = 12 between boxes */ } .topbar__store { display: block; transition: transform .15s ease; } .topbar__store img { width: 2.25rem; /* 36 = the 32 icon plus its 2 outside stroke */ height: 2.25rem; border-radius: 0.625rem; /* 10 = 8 + 2 */ } .topbar__store:hover { transform: translateY(-1px); } /* ---------------------------------------------------------------- title -- */ /* Every run of handwritten type shares the same weight compensation. */ .title, .rating__score, .stat__value { -webkit-text-stroke: var(--hand-weight) currentColor; } .title { margin: 3.0625rem 0 0; /* 49 -> y=172 */ font-family: var(--font-hand); font-weight: normal; line-height: var(--lh-hand); text-align: center; display: flex; flex-direction: column; align-items: center; } .title__small { font-size: 1.875rem; } /* 30 */ .title__large { font-size: 3.125rem; /* 50 */ margin-top: -0.25rem; /* tightens the two lines to y=203 */ } /* ------------------------------------------------------- store buttons -- */ .stores { margin-top: 1.75rem; /* 28 -> y=289 */ display: flex; flex-direction: column; gap: 0.75rem; /* 12 */ } .store-btn { display: block; width: 9.75rem; /* 156 */ height: 3.25rem; /* 52 */ border-radius: 0.5rem; /* 8 */ overflow: hidden; transition: transform .15s ease, opacity .15s ease; } .store-btn img { width: 100%; height: 100%; object-fit: cover; } .store-btn:hover { transform: translateY(-1px); } .store-btn:active { transform: translateY(0); opacity: .8; } /* --------------------------------------------------------------- rating -- */ .rating { margin-top: 2rem; /* 32 -> y=437 */ width: 7.875rem; /* 126 */ display: flex; flex-direction: column; align-items: center; gap: 0.5rem; /* 8 */ } .rating__score { margin: 0; font-family: var(--font-hand); font-size: 1.5625rem; /* 25 */ line-height: var(--lh-hand); text-align: center; } .rating__stars { display: flex; align-items: center; gap: 0.25rem; /* 4 */ } .rating__stars img { width: 1.375rem; /* 22 */ height: 1.375rem; } /* ---------------------------------------------------------------- stats -- */ .stats { margin-top: 1.125rem; /* 18 -> y=514 */ width: 23.375rem; /* 374 */ max-width: 100%; padding-inline: 1.75rem; /* 28 */ display: flex; align-items: flex-start; justify-content: space-between; text-align: center; } .stat { width: 5rem; /* 80 */ display: flex; flex-direction: column; align-items: center; gap: 0.25rem; /* 4 */ } .stat__value { margin: 0; font-family: var(--font-hand); font-size: 1.25rem; /* 20 */ line-height: var(--lh-hand); } .stat__label { margin: 0; font-size: 0.75rem; /* 12 */ font-weight: 700; line-height: 1.1667; /* 14px line box */ } /* ------------------------------------------------- mockup & reception -- */ .mockup { margin-top: 1.75rem; /* 28 -> y=597 */ width: 16.875rem; /* 270 */ height: 34.625rem; /* 554 */ object-fit: cover; } /* Tucked against the right edge above the footer band. The artwork is fully transparent, so it is painted in FRONT of the band and dropped past the rule — the hand-drawn line then reads as ground running behind the desk instead of clipping its feet. Nudge --reception-drop to taste; it uses relative offset, so it never moves anything else. */ .reception { align-self: flex-end; margin-right: 1.5625rem; /* 25 -> x=230..350 */ width: 7.5rem; /* 120 */ height: 8rem; /* 128 */ object-fit: cover; position: relative; z-index: 1; top: var(--reception-drop); } /* --------------------------------------------------------------- footer -- */ .footer { width: 100%; margin-top: -0.180625rem; /* the reception overlaps the rule by 2.89 */ background: url("assets/band-bottom.svg") repeat-x center top / auto 100%; } .footer__inner { width: 23.4375rem; /* 375 */ max-width: 100%; margin-inline: auto; padding: 1.430625rem 1rem 1.75rem; /* 22.89 / 16 / 28 */ display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; /* 8 between the two rows */ } .contact { height: 1.75rem; /* 28 */ display: flex; align-items: center; gap: 0.4375rem; /* 7 */ color: var(--ink); text-decoration: none; } .contact:hover .contact__text { text-decoration: underline; } .contact__icon { flex: none; display: grid; place-items: center; width: 1.75rem; /* 28 */ height: 1.75rem; overflow: hidden; } /* The mail glyph fills its 28 x 28 box... */ .contact__icon-mail { width: 1.75rem; /* 28 */ height: 1.75rem; object-fit: cover; } /* ...while the Instagram mark is a 22 x 22 leaf centred in the same box. */ .contact__icon-inner { width: 1.375rem; /* 22 */ height: 1.375rem; border-radius: 0.3125rem; /* 5 */ object-fit: cover; } .contact__text { font-size: 0.875rem; /* 14 */ letter-spacing: 0.035rem; /* 0.56 */ white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .store-btn, .topbar__store { transition: none; } .store-btn:hover, .topbar__store:hover { transform: none; } }