/* ========================================================= VIDARTICO 1.3.6 — MERT KARATAŞ / ARCHIVAL NAVY SYSTEM Keep the original navy. Add a decorative editorial layer ON TOP of it: archive ledger, photography registration marks, cartographic contours, MK / lotus / writing-image-ideas-journeys references. CSS-only: no request, no duplicate semantic content, no JS. ========================================================= */ /* --------------------------------------------------------- 01 / GLOBAL SURFACE — KEEP THE EXISTING NAVY Do NOT replace the site's dark/light page background. This layer is transparent decoration only. --------------------------------------------------------- */ body:not(.merted-body) #site-content{ position:relative; isolation:isolate; background-color:transparent!important; background-image: linear-gradient(rgba(183,170,148,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(183,170,148,.018) 1px,transparent 1px), url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221100%22%20height=%22820%22%20viewBox=%220%200%201100%20820%22%3E%0A%3Cg%20fill=%22none%22%20stroke=%22%23b7aa94%22%20stroke-opacity=%22.045%22%20stroke-width=%221%22%3E%0A%20%20%3Cpath%20d=%22M80%20150H1020M80%20670H1020%22/%3E%3Cpath%20d=%22M135%2095V725M965%2095V725%22/%3E%0A%20%20%3Ccircle%20cx=%22900%22%20cy=%22585%22%20r=%2282%22/%3E%3Ccircle%20cx=%22900%22%20cy=%22585%22%20r=%2246%22/%3E%3Cpath%20d=%22M796%20585H1004M900%20481V689%22/%3E%0A%20%20%3Cpath%20d=%22M95%20520C220%20420%20330%20455%20430%20385S650%20285%20790%20345%22%20stroke=%22%23d4b06a%22%20stroke-opacity=%22.038%22/%3E%0A%20%20%3Cpath%20d=%22M110%20542C245%20452%20340%20490%20452%20414S676%20320%20812%20370%22%20stroke=%22%23d4b06a%22%20stroke-opacity=%22.025%22/%3E%0A%3C/g%3E%0A%3Cg%20fill=%22%23d4b06a%22%20fill-opacity=%22.027%22%20font-family=%22Georgia,serif%22%3E%0A%20%20%3Ctext%20x=%2236%22%20y=%22720%22%20font-size=%22250%22%20font-weight=%22700%22%3EMK%3C/text%3E%0A%20%20%3Ctext%20x=%22690%22%20y=%22104%22%20font-size=%2220%22%20letter-spacing=%225%22%3EMERT%20KARATA%C5%9E%20%C2%B7%20ARCHIVE%3C/text%3E%0A%3C/g%3E%0A%3Cg%20fill=%22%23e9eef7%22%20fill-opacity=%22.034%22%20font-family=%22Arial,sans-serif%22%3E%0A%20%20%3Ctext%20x=%22694%22%20y=%22132%22%20font-size=%2210%22%20letter-spacing=%223%22%3EWRITING%20/%20IMAGE%20/%20IDEAS%20/%20JOURNEYS%3C/text%3E%0A%20%20%3Ctext%20x=%2286%22%20y=%22126%22%20font-size=%229%22%20letter-spacing=%223%22%3EMMXXVI%20/%20PRIVATE%20INDEX%3C/text%3E%0A%3C/g%3E%0A%3Cg%20transform=%22translate(830%20185)%20scale(1.45)%22%20fill=%22none%22%20stroke=%22%23d4b06a%22%20stroke-opacity=%22.09%22%20stroke-width=%221.2%22%3E%0A%20%20%3Cpath%20d=%22M60%2063C43%2054%2031%2042%2031%2028c12%203%2022%209%2029%2020%207-11%2017-17%2029-20%200%2014-12%2026-29%2035Z%22/%3E%0A%20%20%3Cpath%20d=%22M60%2050C49%2039%2046%2025%2060%208c14%2017%2011%2031%200%2042Z%22/%3E%0A%20%20%3Cpath%20d=%22M55%2057C36%2057%2023%2051%2014%2039c15-4%2029%200%2041%2018Zm10%200c19%200%2032-6%2041-18-15-4-29%200-41%2018Z%22/%3E%0A%3C/g%3E%0A%3C/svg%3E")!important; background-size:72px 72px,72px 72px,1100px 820px!important; background-position:center top,center top,center 80px!important; background-repeat:repeat,repeat,repeat-y!important; } /* A soft vignette allows the archival marks to emerge from the navy without turning the whole site into a patterned wallpaper. */ body:not(.merted-body) #site-content::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(circle at 14% 9%,rgba(212,176,106,.055),transparent 20%), radial-gradient(circle at 90% 28%,rgba(122,31,43,.055),transparent 22%), linear-gradient(90deg,transparent 7%,rgba(212,176,106,.032) 7.04%,transparent 7.08% 93%,rgba(212,176,106,.024) 93.04%,transparent 93.08%); } /* Keep large content surfaces transparent so the original navy + archival decoration can be seen in the intentional negative space. */ body:not(.merted-body) :where(.front-page__mert-karatas,.about-page,.vid-pf,.vid-travel,.content-hub-page){ background-color:transparent!important; } /* --------------------------------------------------------- 02 / ONE INTERNAL-HERO SYSTEM Same geometry, spacing, frame and typographic scale on Portfolio, Travel, About, Writing, Gear, Contact, Motivation, legacy Music and 404. The home image hero remains cinematic, but uses the same outer radius/frame. --------------------------------------------------------- */ body:not(.merted-body) .page-hero{ --mk-hero-h:clamp(265px,24vw,320px); position:relative!important; isolation:isolate!important; overflow:hidden!important; display:flex!important; align-items:stretch!important; width:100%!important; min-height:var(--mk-hero-h)!important; margin:clamp(1.35rem,2.5vw,2.1rem) auto clamp(1.7rem,3vw,2.5rem)!important; padding:0!important; border:1px solid rgba(148,163,184,.34)!important; border-radius:var(--vid-radius-lg,24px)!important; background: linear-gradient(rgba(183,170,148,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(183,170,148,.018) 1px,transparent 1px), radial-gradient(circle at 12% 18%,rgba(212,176,106,.075),transparent 27%), radial-gradient(circle at 88% 22%,rgba(122,31,43,.07),transparent 28%), radial-gradient(circle at top left,#111827 0,#020617 90%)!important; background-size:48px 48px,48px 48px,auto,auto,auto!important; box-shadow:var(--vid-shadow-soft,0 18px 45px rgba(0,0,0,.45))!important; } body:not(.merted-body) .page-hero-inner, body:not(.merted-body) .about-hero-inner{ position:relative!important; z-index:2!important; width:100%!important; max-width:none!important; min-height:var(--mk-hero-h)!important; margin:0!important; padding:clamp(2rem,4vw,3.2rem) clamp(2rem,5vw,4rem)!important; display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:flex-start!important; } body:not(.merted-body) .page-hero-kicker{ margin:0 0 .65rem!important; font-size:clamp(.68rem,.9vw,.78rem)!important; letter-spacing:.26em!important; color:var(--vid-color-accent,#d4b06a)!important; } body:not(.merted-body) .page-hero-title{ position:relative; z-index:2; margin:0 0 .65rem!important; font-size:clamp(2.25rem,4.5vw,4.45rem)!important; line-height:.94!important; letter-spacing:-.035em!important; text-wrap:balance; text-shadow:0 16px 42px rgba(0,0,0,.3); } body:not(.merted-body) .page-hero-description{ position:relative; z-index:2; width:min(100%,50rem)!important; margin:0!important; font-size:clamp(.9rem,1.15vw,1.02rem)!important; line-height:1.6!important; } /* Shared archive rail inside every hero. */ body:not(.merted-body) .page-hero-inner::before, body:not(.merted-body) .about-hero-inner::before{ content:""; position:absolute; left:clamp(2rem,5vw,4rem); top:clamp(1.4rem,2.5vw,2rem); width:clamp(42px,5vw,72px); height:1px; background:linear-gradient(90deg,var(--vid-color-accent,#d4b06a),rgba(212,176,106,0)); box-shadow:0 7px 0 rgba(212,176,106,.18); } /* Same watermark treatment, page-specific word only. */ body:not(.merted-body) .page-hero::after{ content:"ARCHIVE"; position:absolute!important; right:clamp(1.5rem,4vw,3.4rem)!important; bottom:clamp(.8rem,2vw,1.45rem)!important; z-index:0!important; max-width:72%; overflow:hidden; color:rgba(212,176,106,.043)!important; font-family:"Cormorant Garamond","Times New Roman",serif!important; font-size:clamp(5.2rem,13vw,12rem)!important; font-weight:600!important; line-height:.72!important; letter-spacing:-.06em!important; white-space:nowrap; pointer-events:none; user-select:none; } .page-template-page-portfoy .page-hero::after{content:"PORTFOLIO"!important;} .page-template-page-geziler .page-hero::after, .post-type-archive-geziler .page-hero::after{content:"ATLAS"!important;} .page-template-page-hakkimda .page-hero::after{content:"MERT KARATAŞ"!important;} .blog .writing-hub-hero::after,.home .writing-hub-hero::after{content:"NOTES"!important;} .page-template-page-gear .page-hero::after{content:"GEAR"!important;} .page-template-page-iletisim .page-hero::after{content:"CONTACT"!important;} .page-template-page-motivasyon .page-hero::after{content:"MOTIVE"!important;} .error404 .page-hero::after{content:"404"!important;} /* About keeps its portrait, but inside exactly the same hero geometry. */ body:not(.merted-body) .about-hero .about-hero-inner{ display:grid!important; grid-template-columns:minmax(0,1fr) clamp(190px,22vw,270px)!important; align-items:center!important; gap:clamp(1.4rem,3vw,2.6rem)!important; } body:not(.merted-body) .about-hero-text{min-width:0;} body:not(.merted-body) .about-hero-photo{ width:100%!important; height:clamp(185px,18vw,235px)!important; margin:0!important; border-radius:18px!important; overflow:hidden!important; border:1px solid rgba(212,176,106,.23)!important; box-shadow:0 18px 40px rgba(0,0,0,.28)!important; } body:not(.merted-body) .about-hero-photo img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;} /* Motivation has extra copy; compact it rather than giving the page a unique giant hero. */ body:not(.merted-body) .page-hero--motivation .page-hero-subtitle{ margin:.85rem 0 .3rem!important; font-size:clamp(1rem,1.35vw,1.22rem)!important; } body:not(.merted-body) .page-hero--motivation .page-hero-description--secondary{font-size:.86rem!important;line-height:1.48!important;} /* Homepage remains a photographic hero, but its frame language is now the same. */ body:not(.merted-body) .home-hero{ border-radius:var(--vid-radius-lg,24px)!important; box-shadow:var(--vid-shadow-soft,0 18px 45px rgba(0,0,0,.45))!important; } /* --------------------------------------------------------- 03 / PAGE-SPECIFIC DETAILS — keep them subtle and secondary. --------------------------------------------------------- */ .page-template-page-portfoy .pf-workbar{ position:relative;overflow:hidden;border-color:rgba(212,176,106,.18); background:linear-gradient(90deg,rgba(212,176,106,.028),transparent 30%),rgba(2,6,23,.42); } .page-template-page-portfoy .pf-workbar::before{ content:"SELECTED WORK / PRIVATE CATALOGUE";position:absolute;right:1.25rem;top:.7rem; color:rgba(212,176,106,.16);font:700 .52rem/1 Inter,system-ui,sans-serif;letter-spacing:.22em;pointer-events:none; } .page-template-page-portfoy .pf-preview__item img{transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .28s ease,box-shadow .28s ease;} .page-template-page-portfoy .pf-preview__item:hover img{transform:translateY(-3px) scale(1.012);box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 0 1px rgba(212,176,106,.16);} .page-template-page-geziler .travel-shell,.post-type-archive-geziler .travel-shell{ position:relative;border-color:rgba(212,176,106,.16)!important; background:repeating-linear-gradient(90deg,rgba(183,170,148,.014) 0 1px,transparent 1px 76px),rgba(2,6,23,.44)!important; } .page-template-page-geziler .travel-shell::after,.post-type-archive-geziler .travel-shell::after{ content:"GRAND TOUR / FIELD NOTES";position:absolute;right:1.2rem;bottom:.8rem;color:rgba(212,176,106,.15); font:700 .5rem/1 Inter,system-ui,sans-serif;letter-spacing:.22em;pointer-events:none; } .page-template-page-hakkimda .section-title-row{position:relative;} .page-template-page-hakkimda .section-title-row::after{content:"";position:absolute;left:0;bottom:-.55rem;width:min(230px,32vw);height:1px;background:linear-gradient(90deg,rgba(212,176,106,.65),transparent);} /* --------------------------------------------------------- 04 / RESPONSIVE DECORATION + HERO GEOMETRY --------------------------------------------------------- */ @media (max-width:900px){ body:not(.merted-body) #site-content{ background-size:56px 56px,56px 56px,760px 566px!important; background-position:center top,center top,center 70px!important; } body:not(.merted-body) .page-hero{--mk-hero-h:250px;margin:1rem auto 1.5rem!important;} body:not(.merted-body) .page-hero-inner, body:not(.merted-body) .about-hero-inner{padding:1.8rem 1.65rem!important;} body:not(.merted-body) .page-hero-inner::before, body:not(.merted-body) .about-hero-inner::before{left:1.65rem;top:1.25rem;} body:not(.merted-body) .about-hero .about-hero-inner{grid-template-columns:minmax(0,1fr) 180px!important;gap:1.2rem!important;} body:not(.merted-body) .about-hero-photo{height:175px!important;} body:not(.merted-body) .page-hero::after{font-size:clamp(4.4rem,18vw,8rem)!important;right:1.2rem!important;} } @media (max-width:640px){ body:not(.merted-body) #site-content{ background-size:44px 44px,44px 44px,620px 462px!important; background-position:center top,center top,44% 56px!important; } body:not(.merted-body) .page-hero{--mk-hero-h:230px;border-radius:20px!important;} body:not(.merted-body) .page-hero-inner, body:not(.merted-body) .about-hero-inner{padding:1.55rem 1.35rem!important;} body:not(.merted-body) .page-hero-inner::before, body:not(.merted-body) .about-hero-inner::before{left:1.35rem;top:1.08rem;} body:not(.merted-body) .page-hero-title{font-size:clamp(2rem,10vw,3rem)!important;} body:not(.merted-body) .page-hero-description{font-size:.86rem!important;line-height:1.52!important;} body:not(.merted-body) .about-hero .about-hero-inner{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;} body:not(.merted-body) .about-hero-photo{display:none!important;} body:not(.merted-body) .page-hero::after{font-size:clamp(4rem,24vw,7rem)!important;opacity:.78;} } /* --------------------------------------------------------- 05 / LIGHT THEME — preserve parchment background; only the decorative layer changes contrast. No global recolouring. --------------------------------------------------------- */ html[data-vid-theme="light"] body:not(.merted-body) #site-content{ background-image: linear-gradient(rgba(74,54,36,.026) 1px,transparent 1px), linear-gradient(90deg,rgba(74,54,36,.022) 1px,transparent 1px), url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221100%22%20height=%22820%22%20viewBox=%220%200%201100%20820%22%3E%0A%3Cg%20fill=%22none%22%20stroke=%22%23b7aa94%22%20stroke-opacity=%22.045%22%20stroke-width=%221%22%3E%0A%20%20%3Cpath%20d=%22M80%20150H1020M80%20670H1020%22/%3E%3Cpath%20d=%22M135%2095V725M965%2095V725%22/%3E%0A%20%20%3Ccircle%20cx=%22900%22%20cy=%22585%22%20r=%2282%22/%3E%3Ccircle%20cx=%22900%22%20cy=%22585%22%20r=%2246%22/%3E%3Cpath%20d=%22M796%20585H1004M900%20481V689%22/%3E%0A%20%20%3Cpath%20d=%22M95%20520C220%20420%20330%20455%20430%20385S650%20285%20790%20345%22%20stroke=%22%23d4b06a%22%20stroke-opacity=%22.038%22/%3E%0A%20%20%3Cpath%20d=%22M110%20542C245%20452%20340%20490%20452%20414S676%20320%20812%20370%22%20stroke=%22%23d4b06a%22%20stroke-opacity=%22.025%22/%3E%0A%3C/g%3E%0A%3Cg%20fill=%22%23d4b06a%22%20fill-opacity=%22.027%22%20font-family=%22Georgia,serif%22%3E%0A%20%20%3Ctext%20x=%2236%22%20y=%22720%22%20font-size=%22250%22%20font-weight=%22700%22%3EMK%3C/text%3E%0A%20%20%3Ctext%20x=%22690%22%20y=%22104%22%20font-size=%2220%22%20letter-spacing=%225%22%3EMERT%20KARATA%C5%9E%20%C2%B7%20ARCHIVE%3C/text%3E%0A%3C/g%3E%0A%3Cg%20fill=%22%23e9eef7%22%20fill-opacity=%22.034%22%20font-family=%22Arial,sans-serif%22%3E%0A%20%20%3Ctext%20x=%22694%22%20y=%22132%22%20font-size=%2210%22%20letter-spacing=%223%22%3EWRITING%20/%20IMAGE%20/%20IDEAS%20/%20JOURNEYS%3C/text%3E%0A%20%20%3Ctext%20x=%2286%22%20y=%22126%22%20font-size=%229%22%20letter-spacing=%223%22%3EMMXXVI%20/%20PRIVATE%20INDEX%3C/text%3E%0A%3C/g%3E%0A%3Cg%20transform=%22translate(830%20185)%20scale(1.45)%22%20fill=%22none%22%20stroke=%22%23d4b06a%22%20stroke-opacity=%22.09%22%20stroke-width=%221.2%22%3E%0A%20%20%3Cpath%20d=%22M60%2063C43%2054%2031%2042%2031%2028c12%203%2022%209%2029%2020%207-11%2017-17%2029-20%200%2014-12%2026-29%2035Z%22/%3E%0A%20%20%3Cpath%20d=%22M60%2050C49%2039%2046%2025%2060%208c14%2017%2011%2031%200%2042Z%22/%3E%0A%20%20%3Cpath%20d=%22M55%2057C36%2057%2023%2051%2014%2039c15-4%2029%200%2041%2018Zm10%200c19%200%2032-6%2041-18-15-4-29%200-41%2018Z%22/%3E%0A%3C/g%3E%0A%3C/svg%3E")!important; } html[data-vid-theme="light"] body:not(.merted-body) .page-hero{ background: linear-gradient(rgba(122,31,43,.02) 1px,transparent 1px), linear-gradient(90deg,rgba(122,31,43,.016) 1px,transparent 1px), radial-gradient(circle at top left,#f8f3e7 0,#ece3d3 100%)!important; border-color:rgba(163,139,90,.38)!important; } html[data-vid-theme="light"] body:not(.merted-body) .page-hero::after{color:rgba(122,31,43,.045)!important;display:block!important;} /* ---------- 09 / CREATIVE FLOW: scale correction, desktop + mobile ---------- */ /* Desktop: the English lockup must fit without clipping and the component must stop dominating the page. */ @media (min-width:901px){ .creative-flow__mast{ grid-template-columns:minmax(0,1fr) minmax(112px,.27fr) minmax(0,1fr) !important; gap:clamp(.8rem,1.8vw,1.55rem) !important; min-height:clamp(150px,16vw,205px) !important; padding:clamp(1.15rem,2.2vw,2rem) clamp(1.3rem,2.7vw,2.35rem) !important; } .creative-flow__word strong{ font-size:clamp(3.05rem,5.8vw,5.65rem) !important; line-height:.76 !important; letter-spacing:-.05em !important; } html[lang^="en"] .creative-flow__word strong{ font-size:clamp(2.75rem,5vw,5rem) !important; letter-spacing:-.06em !important; } .creative-flow__signal{min-height:82px !important;} .creative-flow__lotus{width:68px !important;} .creative-flow__lotus svg{width:40px !important;} .creative-flow__step{ min-height:160px !important; padding:1.15rem 1.05rem 1.2rem !important; } .creative-flow__num{font-size:clamp(3.2rem,4.4vw,4.9rem) !important;} .creative-flow__step h3{font-size:clamp(1.18rem,1.55vw,1.48rem) !important;} .creative-flow__step p{font-size:.79rem !important;line-height:1.58 !important;} } /* Tablet: preserve the two-word composition, but reduce the fight for width. */ @media (min-width:641px) and (max-width:900px){ .creative-flow__mast{ grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr) !important; gap:.75rem !important; min-height:155px !important; padding:1.3rem !important; } .creative-flow__word strong{font-size:clamp(2.6rem,7.4vw,4.25rem) !important;} html[lang^="en"] .creative-flow__word strong{font-size:clamp(2.35rem,6.6vw,3.85rem) !important;} .creative-flow__lotus{width:60px !important;} .creative-flow__lotus svg{width:35px !important;} } /* Mobile: editorial lockup, not billboard typography. */ @media (max-width:640px){ .creative-flow{border-radius:16px !important;} .creative-flow__mast{ grid-template-columns:1fr !important; grid-template-rows:auto 54px auto !important; gap:.34rem !important; min-height:0 !important; padding:1rem .95rem 1.05rem !important; } .creative-flow__word > span{ margin-bottom:.22rem !important; font-size:.44rem !important; letter-spacing:.13em !important; } .creative-flow__word strong{ font-size:clamp(2.55rem,14.2vw,3.95rem) !important; line-height:.8 !important; letter-spacing:-.045em !important; white-space:normal !important; } html[lang^="en"] .creative-flow__word strong{ font-size:clamp(2.35rem,12.7vw,3.55rem) !important; letter-spacing:-.055em !important; } .creative-flow__signal{min-height:54px !important;} .creative-flow__lotus{width:48px !important;} .creative-flow__lotus svg{width:29px !important;} .creative-flow__steps{grid-template-columns:1fr !important;overflow:visible !important;} .creative-flow__step{ min-height:0 !important; grid-template-columns:34px minmax(0,1fr) !important; gap:.65rem !important; padding:.78rem .86rem !important; } .creative-flow__num{font-size:.76rem !important;padding-top:.2rem !important;} .creative-flow__step h3{font-size:1.08rem !important;margin-bottom:.25rem !important;} .creative-flow__step p{font-size:.76rem !important;line-height:1.5 !important;} } @media (prefers-reduced-motion:reduce){ .page-template-page-portfoy .pf-preview__item img{transition:none!important;} }