/* Site chrome for the WordPress rebuild: nav, blog index, single posts. santa-cruz-passages.css covers the fixed canvas and the design tokens but nothing outside it -- the Wix original drew this chrome itself. */ body { margin: 0; /* Wix master page, measured at 1440 with the ad banner excluded: white page, a full-width rgb(123,89,85) header band 235px tall that shows beside the canvas. The original has 131px of white above the band; removed by request, so the band starts at the top of the page. */ background: #fff; color: var(--scp-color-45); font-family: var(--scp-serif); } @media (min-width: 768px) { body { background: linear-gradient(rgb(123, 89, 85), rgb(123, 89, 85)) 0 0 / 100% 235px no-repeat #fff; } } /* Every page fills the window: the body is a flex column at least one viewport tall, and the page's main box grows into any spare height. The blog's salmon ground simply continues. The canvas photograph is fixed to the window rather than to the page: it is cover-fitted to the viewport once, and the content scrolls over it. So it is the same size on every page of a section regardless of how long the page is (the canvases range from 895px to 2791px; cover-fitting each one zoomed the same photo up to 4x). A fixed-position element is used rather than background-attachment: fixed, which iOS Safari ignores. */ body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .scp-blog { flex: 1 0 auto; } /* A page taller than the window has a scrollbar and is ~15px narrower than one that fits, so anything sized or centred on the layout width shifts between pages. Both the photograph and the canvas are therefore measured against 100vw, which always includes the scrollbar column: the photo is fitted to the full window width on every page (the last 15px sit behind the scrollbar when there is one), and the canvas is centred on the full window width rather than on the space beside the scrollbar. No reserved gutter, so short pages show no empty strip. */ @media (min-width: 768px) { .scp-canvas-wrap { flex: 1 0 auto; } .scp-canvas-bg { position: fixed; inset: 0; width: 100vw; background-position: center center; } .scp-canvas { margin: 0 0 0 max(0px, calc((100vw - 980px) / 2)); } } /* Touch tablets narrower than the canvas (iPad mini / iPad portrait, 768 to 979px, coarse pointer): fit the 980px canvas to the screen instead of scrolling sideways. `zoom` scales layout as well as paint, so heights follow. Mouse-driven windows of the same width keep the fixed 980 and scroll sideways, as the original does. The ratio is 100vw / 980px, obtained as a unitless number via tan(atan2()); the literal before it is the fallback for browsers that cannot evaluate it. */ @media (min-width: 768px) and (max-width: 979px) and (pointer: coarse) { :root { --scp-tscale: .78; --scp-tscale: tan(atan2(100vw, 980px)); } .scp-canvas-wrap { min-width: 0; height: auto; } .scp-canvas { zoom: var(--scp-tscale); margin: 0; } .scp-blog:not(.scp-blog--post) { zoom: var(--scp-tscale); } } /* Mobile browsers inflate text on pages wider than the screen ("font boosting"); on a fixed canvas that pushes copy out of its measured box. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* No footer strip: the original carries a 40px rgb(123,89,85) band on every page (13px on phones); removed by request. */ @media (max-width: 767px) { /* The front page is shorter than a phone screen. Centre it in the viewport instead of pinning it to the top; the nav bar (first child) stays at the top and the canvas centres in the space below it. Auto margins resolve to 0 once content is taller than the screen, so nothing changes on the long pages. */ body.home .scp-mcanvas-wrap { margin-top: auto; margin-bottom: auto; } } /* -- primary nav, as tan tabs inside the canvas ------------------------ Every value measured off the frozen Wix mirror at 1440x900: tab rgb(248,232,186), 25px tall, radius 10px 10px 0 0 current tab rgb(152,152,151) with rgb(251,216,212) text label Georgia 400 13px / 25px, rgb(50,50,50) spacing 10px between tabs, nav at canvas left:5px top:122px */ .scp-tabnav { position: absolute; left: 5px; top: 122px; z-index: 40; } .scp-tabnav .scp-tabs { display: flex; margin: 0; padding: 0; list-style: none; gap: 10px; } .scp-tabnav .scp-tabs li { position: relative; } .scp-tabnav .scp-tabs a { display: block; height: 25px; padding: 0 12px; background: rgb(248, 232, 186); color: rgb(50, 50, 50); border-radius: 10px 10px 0 0; text-decoration: none; text-align: center; font: 400 13px/25px var(--scp-serif); white-space: nowrap; } .scp-tabnav .scp-tabs a:hover { background: rgb(152, 152, 151); color: rgb(251, 216, 212); } .scp-tabnav .scp-tabs .current-menu-item > a, .scp-tabnav .scp-tabs .current-menu-ancestor > a, .scp-tabnav .scp-tabs .current-menu-parent > a { background: rgb(152, 152, 151); color: rgb(251, 216, 212); } /* Wix dropped a dropdown under each tab that has children. */ .scp-tabnav .scp-tabs ul { position: absolute; left: 0; top: 25px; z-index: 41; display: none; flex-direction: column; min-width: 100%; margin: 0; padding: 0; list-style: none; } .scp-tabnav .scp-tabs li:hover > ul, .scp-tabnav .scp-tabs li:focus-within > ul { display: flex; } .scp-tabnav .scp-tabs ul a { border-radius: 0; padding: 0 8px; } /* -- gallery lightbox -------------------------------------------------- Measured on the original: overlay filling the viewport at z-index 100000, close icon 19px inset 28px, arrows 45px inset 15px and vertically centred, all white strokes on no fill. The picture is fitted to 90% of the viewport and never upscaled -- see functions.php. Wix paints the backdrop solid black; ours is 75% black so the page shows through dimmed, and the white icons carry a shadow to stay legible over the lighter patches. */ .scp-lb { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, .75); display: flex; align-items: center; justify-content: center; } .scp-lb__img { display: block; object-fit: contain; } .scp-lb button { position: absolute; padding: 0; cursor: pointer; background: none; border: 0; line-height: 0; } .scp-lb button svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8)); } .scp-lb button path { fill: none; stroke: #fff; stroke-width: 10; } .scp-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 6px; } .scp-lb:focus { outline: none; } .scp-lb__close { top: 28px; right: 28px; width: 19px; height: 19px; } .scp-lb__prev, .scp-lb__next { top: 50%; margin-top: -22px; width: 45px; height: 45px; } .scp-lb__prev { left: 15px; } .scp-lb__next { right: 15px; } /* Fingers need a bigger target than a 19px icon. */ @media (max-width: 767px) { .scp-lb__close { width: 26px; height: 26px; top: 20px; right: 20px; } .scp-lb__prev, .scp-lb__next { width: 38px; height: 38px; margin-top: -19px; } } /* -- mobile menu ------------------------------------------------------- Measured off the Wix mobile site at a 320px viewport: hamburger 50x50, rgb(251,216,212), 1px rgb(61,44,42), radius 4px rows 278 wide, 48 tall, 1px apart, rgb(251,216,212) current row rgb(152,152,151) label Arial 400 16px/48px, rgb(61,44,42), padding 0 17px chevron 51 wide, border-left 1px rgb(61,44,42) The rows are multiplied by --scp-mscale so the panel grows with the canvas. The original puts the button in a 300px brown band above the page; this theme keeps the band and its colour but at an ordinary 64px navbar height, with the button a 44px tap target inside it. The bar is in normal flow, so the page starts below it and it scrolls away with the page, as the original band does. */ .scp-mnav { display: none; } @media (max-width: 767px) { .scp-mnav { display: block; position: relative; z-index: 60; height: 64px; background: rgb(123, 89, 85); margin-bottom: 20px; } /* breathing room before the content */ } .scp-mnav__toggle { position: absolute; z-index: 60; top: 10px; right: 16px; width: 44px; height: 44px; padding: 0; cursor: pointer; background: rgb(251, 216, 212); border: 1px solid rgb(61, 44, 42); border-radius: 4px; } .scp-mnav__toggle span, .scp-mnav__toggle span::before, .scp-mnav__toggle span::after { position: absolute; left: 50%; width: 22px; height: 2px; background: rgb(61, 44, 42); transform: translateX(-50%); transition: transform .2s ease, background .2s ease, top .2s ease; } .scp-mnav__toggle span { top: 50%; margin-top: -1px; } .scp-mnav__toggle span::before { content: ''; top: -7px; } .scp-mnav__toggle span::after { content: ''; top: 7px; } .scp-mnav.is-open .scp-mnav__toggle span { background: transparent; } .scp-mnav.is-open .scp-mnav__toggle span::before { top: 0; transform: translateX(-50%) rotate(45deg); } .scp-mnav.is-open .scp-mnav__toggle span::after { top: 0; transform: translateX(-50%) rotate(-45deg); } .scp-mnav__panel { position: absolute; z-index: 59; top: 64px; /* hangs from the bottom of the bar */ left: 50%; width: calc(278px * var(--scp-mscale, 1)); margin-left: calc(-139px * var(--scp-mscale, 1)); max-height: calc(100vh - 80px); overflow-y: auto; /* The rows are 48px on a 49px pitch. Without a ground behind them the page shows through that 1px gap; the original's panel container carries the same pink, so the seams read as hairlines rather than page content. */ background: rgb(251, 216, 212); } .scp-mnav__list, .scp-mnav__list ul { margin: 0; padding: 0; list-style: none; } .scp-mnav__list li { position: relative; margin-bottom: 1px; } .scp-mnav__list a { display: block; text-decoration: none; background: rgb(251, 216, 212); color: rgb(61, 44, 42); font: 400 calc(16px * var(--scp-mscale, 1)) / calc(48px * var(--scp-mscale, 1)) var(--scp-sans); padding: 0 calc(17px * var(--scp-mscale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .scp-mnav__list .has-children > a { padding-right: calc(68px * var(--scp-mscale, 1)); } .scp-mnav__list .current-menu-item > a, .scp-mnav__list .current-menu-ancestor > a, .scp-mnav__list .current-menu-parent > a { background: rgb(152, 152, 151); } .scp-mnav__more { position: absolute; top: 0; right: 0; padding: 0; cursor: pointer; width: calc(51px * var(--scp-mscale, 1)); height: calc(48px * var(--scp-mscale, 1)); background: rgb(251, 216, 212); border: 0; border-left: 1px solid rgb(61, 44, 42); color: rgb(61, 44, 42); font: 400 calc(18px * var(--scp-mscale, 1)) / 1 var(--scp-sans); } .scp-mnav__more::before { content: '\2228'; } /* chevron down */ .scp-mnav__list li.is-open > .scp-mnav__more::before { content: '\2227'; } .scp-mnav__list ul { display: none; } .scp-mnav__list li.is-open > ul { display: block; } .scp-mnav__list ul a { padding-left: calc(34px * var(--scp-mscale, 1)); } /* -- fallback nav for blog and archives, which have no canvas ---------- */ .scp-nav { background: #222; border-bottom: 1px solid rgba(255,255,255,.12); } .scp-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; margin: 0 auto; padding: .75rem 1rem; max-width: var(--scp-canvas); list-style: none; } .scp-nav li { position: relative; } .scp-nav a { color: var(--scp-color-45); text-decoration: none; font-size: 14px; line-height: 1.6; } .scp-nav a:hover, .scp-nav a:focus { color: var(--scp-color-28); } /* Submenus: flat on small screens, revealed on hover where there is room. */ .scp-nav ul ul { padding: 0 0 0 1rem; gap: 0 1rem; justify-content: flex-start; } @media (min-width: 900px) { .scp-nav ul ul { position: absolute; left: 0; top: 100%; z-index: 50; display: none; flex-direction: column; min-width: 15rem; padding: .5rem 0; background: #222; border: 1px solid rgba(255,255,255,.12); } .scp-nav li:hover > ul, .scp-nav li:focus-within > ul { display: flex; } .scp-nav ul ul a { display: block; padding: .35rem 1rem; } } /* Canvas corrections (heading weight, .scp-font-* line-height, paragraph strut, contact-form typography) now live in the export's own stylesheet -- santacruz-export/theme/santa-cruz-passages.css, "Corrections" section. Deliberately not duplicated here: the export is the source of truth and this theme copies it verbatim. See santacruz-export/reports/corrections.md. */ /* -- blog: the original's 980px salmon canvas -------------------------- Measured on the original at 1440x900: ground rgb(247,178,170), 980 wide, centred banner 640x95 at canvas x=195 content col 670 wide at canvas x=30; sidebar 220 at x=729 card 670x239; cover 319 wide, object-fit cover card panel rgba(253,254,253,.48), no border, 24px padding card title Arial 400 30px, rgb(254,253,253) card excerpt Georgia 400 15px/22.5px, rgb(254,253,253) side heading Arial 400 21px/29.4px, rgb(254,253,253), 6px white rule */ .scp-blog { background: rgb(247, 178, 170); max-width: 980px; margin: 0 auto; color: var(--scp-color-45); } /* Blog index, desktop: the TIME TO SHINE banner sits inside the brown header band (body background, 0..235) with its bottom 105px above the band's edge, and the salmon canvas starts 25px below the band. Measured at 1000, 1440 and 2000 wide on the original, minus its 131px of white above the band. The canvas is a fixed 980px like every other page. */ @media (min-width: 768px) { .scp-blog:not(.scp-blog--post) { position: relative; width: 980px; max-width: none; margin-top: 260px; } .scp-blog:not(.scp-blog--post) .scp-blog__banner { position: absolute; left: 195px; top: -130px; padding: 0; } .scp-blog:not(.scp-blog--post) .scp-blog__inner { padding-top: 55px; } } /* A single post: full-bleed rgb(123,89,85) band carrying the ornate logo at 565x200, then white ground. Because the ground is white the near-white body colour is invisible -- the original genuinely renders whole posts that way -- so text falls back to the palette's warm brown. Inline colours in the imported content (the magentas) still win. */ .scp-blog--post { background: #fff; max-width: none; color: var(--scp-color-42); } .scp-blog__band { background: rgb(123, 89, 85); height: 235px; display: flex; align-items: center; justify-content: center; } .scp-blog__band img{ display: block; width: 565px; height: 200px; object-fit: contain; max-width: 90%; } .scp-blog--post .scp-blog__inner { max-width: 980px; margin: 0 auto; } .scp-blog--post .scp-bpost__title, .scp-blog--post .scp-bpost__meta, .scp-blog--post .scp-prose, .scp-blog--post .scp-side__h, .scp-blog--post .scp-side__t, .scp-blog--post .scp-side__note, .scp-blog--post .scp-side__tags a, .scp-blog--post .scp-back a { color: var(--scp-color-42); } .scp-blog--post .scp-side__rule { border-top-color: var(--scp-color-42); opacity: .5; } .scp-blog--post .scp-prose a { color: var(--scp-color-44); } .scp-blog__banner { padding: 0 0 0 195px; } .scp-blog__banner img { display: block; width: 640px; max-width: 100%; height: auto; } .scp-blog__inner { display: grid; grid-template-columns: 670px 221px; gap: 29px; /* border-box, or the post variant's max-width applies to the content box and the padding shifts the columns 30px left of the original. */ box-sizing: border-box; padding: 24px 30px 60px; } .scp-blog__main { min-width: 0; } .scp-bcard { display: grid; grid-template-columns: 319px 1fr; /* The original clamps every card to 239px whatever the cover's aspect; the cover crops rather than stretching the row. */ height: 239px; overflow: hidden; margin: 0 0 33px; } .scp-bcard--noimg { grid-template-columns: 1fr; } .scp-bcard__img { display: block; overflow: hidden; } .scp-bcard__img img{ display: block; width: 100%; height: 100%; object-fit: cover; } .scp-bcard__body { background: rgba(253, 254, 253, .48); padding: 24px; } .scp-bcard__title { font: 400 30px/1.15 var(--scp-sans); margin: 0 0 14px; } .scp-bcard__title a{ color: var(--scp-color-45); text-decoration: none; } .scp-bcard__title a:hover { text-decoration: underline; } .scp-bcard__ex { font: 400 15px/22.5px var(--scp-serif); color: var(--scp-color-45); margin: 0; } .scp-bpost__title { font: 400 30px/1.15 var(--scp-sans); color: var(--scp-color-45); margin: 0 0 8px; } .scp-bpost__meta { font: 400 13px/1.4 var(--scp-serif); color: var(--scp-color-45); opacity: .85; margin: 0 0 20px; } .scp-bpost__meta a { color: inherit; } .scp-bpost .scp-prose { background: rgba(253, 254, 253, .48); padding: 24px; } .scp-side__h { font: 400 21px/29.4px var(--scp-sans); color: var(--scp-color-45); margin: 0; } .scp-side__rule { border-top: 6px solid rgb(253, 254, 253); margin: 6px 0 12px; } .scp-side__body { margin: 0 0 34px; } .scp-side__list { list-style: none; margin: 0; padding: 0; } .scp-side__list li { display: grid; grid-template-columns: 74px 1fr; gap: 13px; align-items: start; margin: 0 0 20px; } .scp-side__list li.scp-side__list--bare { grid-template-columns: 1fr; } .scp-side__thumb { display: block; } .scp-side__thumb img { display: block; width: 74px; height: auto; } .scp-side__t { color: var(--scp-color-45); text-decoration: none; font: 400 15px/21px var(--scp-serif); } .scp-side__t:hover { text-decoration: underline; } .scp-side__tags { margin: 0; font: 400 14px/1.9 var(--scp-serif); } .scp-side__tags a { color: var(--scp-color-45); text-decoration: none; } .scp-side__tags a:hover { text-decoration: underline; } .scp-side__note { margin: 0; font: 400 14px/1.5 var(--scp-serif); opacity: .85; } /* One column on phones (the desktop canvas stays 980 and scrolls sideways, as on the original), and the cover stacks above the panel. */ @media (max-width: 767px) { .scp-blog__inner { grid-template-columns: 1fr; } .scp-blog__banner { padding-left: 0; text-align: center; } .scp-blog__banner img { margin: 0 auto; } } @media (max-width: 700px) { .scp-bcard { grid-template-columns: 1fr; height: auto; } .scp-bcard__img img { height: 200px; } .scp-bcard__title { font-size: 24px; } } /* -- flowing documents used inside the blog shell ---------------------- */ .scp-prose { font-size: 15px; line-height: 1.7; font-family: var(--scp-serif); color: var(--scp-color-45); } .scp-prose p { margin: 0 0 1.1em; } .scp-prose p:last-child { margin-bottom: 0; } .scp-prose a { color: var(--scp-color-44); } .scp-prose img, .scp-prose iframe { max-width: 100%; height: auto; } .scp-prose blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 3px solid var(--scp-color-42); font-style: italic; } .scp-back { margin-top: 2.5rem; font: 400 15px/1.4 var(--scp-serif); } .scp-back a { color: var(--scp-color-45); } .pagination, .nav-links { display: flex; gap: .75rem; font: 400 15px/1.4 var(--scp-serif); } .nav-links a { color: var(--scp-color-45); }