/* V3: continuous parchment, isolated character scenes rather than banner strips. */ #storyPage{width:min(1160px,100%);padding-left:34px;padding-right:34px;overflow:hidden} #storyPage .opening{padding-top:20px} #storyPage .don{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:0;max-width:980px;width:100%;margin:0 auto} #storyPage .don-image{position:relative;inset:auto;z-index:auto;grid-column:2;grid-row:1;width:100%;height:410px;aspect-ratio:auto;object-fit:cover;object-position:100% 50%} #storyPage .don-copy{grid-column:1;grid-row:1;width:100%;padding:30px 10px 30px 35px} #storyPage .don-image,#storyPage .scene img{ mix-blend-mode:multiply; mask-image:radial-gradient(ellipse 51% 51% at 50% 49%,#000 45%,#000d 60%,#0006 78%,transparent 99%); -webkit-mask-image:radial-gradient(ellipse 51% 51% at 50% 49%,#000 45%,#000d 60%,#0006 78%,transparent 99%); mask-composite:add;-webkit-mask-composite:source-over; } #storyPage .alliance{margin:0 auto 14px} #storyPage .journey{padding:0} #storyPage .families{display:flex;flex-direction:column;gap:0;margin:0;padding:0} #storyPage .family,#storyPage .family:last-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:80px;width:100%;margin:0;background:none;transform:none;min-height:340px} #storyPage .family+.family{margin-top:-24px} #storyPage .family .scene{grid-column:1;grid-row:1;width:100%;height:365px;margin:0;overflow:visible} #storyPage .family:nth-child(even) .scene{grid-column:2} #storyPage .family .family-copy{grid-column:2;grid-row:1;padding:30px 30px 30px 0} #storyPage .family:nth-child(even) .family-copy{grid-column:1;padding:30px 0 30px 30px} #storyPage .scene img{width:100%;max-width:none;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover} #storyPage .family:nth-child(1) img{object-position:0% 50%} #storyPage .family:nth-child(2) img{object-position:100% 50%} #storyPage .family:nth-child(3) img{object-position:100% 50%} #storyPage .family:nth-child(4) img{object-position:0% 50%} #storyPage .family:nth-child(5) img{object-position:100% 50%} #storyPage .family:nth-child(6) img{object-position:0% 50%} #storyPage .family:nth-child(7) img{object-position:100% 50%} #storyPage .family:before,#storyPage .family:last-child:before{width:40px;height:1px;top:50%;left:calc(50% - 40px);right:auto} #storyPage .family:nth-child(even):before{left:50%} #storyPage .family:after,#storyPage .family:last-child:after{left:calc(50% - 13px);right:auto;top:calc(50% - 13px)} #storyPage .chapter{font-size:11px;letter-spacing:.16em} #storyPage .family h3{font-size:35px} #storyPage .family p{font-size:15px} #storyPage .closing{margin-top:6px} @media(max-width:760px){ #storyPage{width:100%;padding-left:16px;padding-right:16px} #storyPage .don{display:flex;flex-direction:column;gap:0} #storyPage .don-image{order:0;width:min(100%,460px);height:335px} #storyPage .don-copy{order:1;padding:0 12px 26px;text-align:center} #storyPage .family,#storyPage .family:last-child{display:flex;flex-direction:column;gap:0;min-height:0;padding-left:22px;margin:0} #storyPage .family+.family{margin-top:8px} #storyPage .family .scene,#storyPage .family:nth-child(even) .scene{order:0;width:min(100%,440px);height:320px;margin:0 auto} #storyPage .family .family-copy,#storyPage .family:nth-child(even) .family-copy{order:1;padding:0 12px 25px;width:100%} #storyPage .family:before,#storyPage .family:nth-child(even):before,#storyPage .family:last-child:before{left:10px;top:160px;width:12px;height:1px} #storyPage .family:after,#storyPage .family:nth-child(even):after,#storyPage .family:last-child:after{left:-3px;top:147px} #storyPage .family h3{font-size:30px} #storyPage .alliance{padding:5px 10px 18px} } /* Warm yellow parchment across the entire story page. */ html:has(#storyPage){background:#ecd09a} body#story-top{ background-color:#ecd09a!important; background-image: linear-gradient(90deg,#9b5e2140,transparent 8% 92%,#9b5e2140), radial-gradient(ellipse at 20% 12%,#c38a352e,transparent 44%), radial-gradient(ellipse at 75% 55%,#fff0be65,transparent 55%), radial-gradient(ellipse at 12% 85%,#b47d302e,transparent 40%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.11'/%3E%3C/svg%3E")!important; background-attachment:scroll!important; } #storyPage,#storyPage main,#storyPage .opening,#storyPage .closing{background:transparent!important} #storyPage .family:after{background:#ecd09a!important} /* Preserve original image colors over the yellow parchment. */ #storyPage .don-image,#storyPage .scene img{mix-blend-mode:normal!important;filter:none!important} /* Matching return buttons at the top and bottom of the story. */ #storyPage .topbar .back,#storyPage .closing .end-link{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:44px;padding:11px 21px;border:1px solid #454545;border-radius:9px; background:#303030;color:#f8edda;font:600 12px/1.5 Arial,Helvetica,sans-serif; letter-spacing:.04em;text-decoration:none;box-shadow:0 4px 12px #30271922; transition:background .2s,box-shadow .2s; } #storyPage .topbar .back:hover,#storyPage .closing .end-link:hover{background:#444;box-shadow:0 5px 16px #30271933} #storyPage .topbar{position:static;inset:auto;flex:none} /* Return buttons use the existing Corleone order/login button design. */ :is(#storyPage .topbar .back,#storyPage .closing .end-link){ position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:220px; height:58px; padding:0 36px; border:1px solid rgba(224,187,104,.78); border-radius:999px; color:#f6e5bd; text-decoration:none; text-transform:uppercase; letter-spacing:2.2px; font-size:14px; font-weight:700; background: linear-gradient(180deg,rgba(38,31,21,.88),rgba(15,13,10,.94)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.30), 0 0 0 rgba(218,178,91,0); overflow:hidden; isolation:isolate; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, color .24s ease, background .24s ease; } :is(#storyPage .topbar .back,#storyPage .closing .end-link) span{ position:relative; z-index:3; } :is(#storyPage .topbar .back,#storyPage .closing .end-link)::before{ content:""; position:absolute; top:-40%; left:-45%; width:34%; height:180%; transform:skewX(-18deg); background:linear-gradient( 90deg, transparent, rgba(255,238,185,.16), rgba(255,255,255,.78), rgba(255,218,119,.16), transparent ); z-index:2; opacity:0; } :is(#storyPage .topbar .back,#storyPage .closing .end-link)::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:1; background: radial-gradient(circle at 50% 0%,rgba(236,194,99,.15),transparent 52%); opacity:.25; transition:opacity .24s ease; } :is(#storyPage .topbar .back,#storyPage .closing .end-link):hover, :is(#storyPage .topbar .back,#storyPage .closing .end-link):focus-visible{ transform:translateY(-2px) scale(1.015); border-color:#e5bf6a; color:#fff4d8; background: linear-gradient(180deg,rgba(50,39,23,.94),rgba(18,15,10,.98)); box-shadow: 0 10px 30px rgba(0,0,0,.34), 0 0 18px rgba(218,178,91,.28), inset 0 0 18px rgba(218,178,91,.08); } :is(#storyPage .topbar .back,#storyPage .closing .end-link):hover::before, :is(#storyPage .topbar .back,#storyPage .closing .end-link):focus-visible::before{ opacity:1; animation:order-btn-shine .72s ease forwards; } :is(#storyPage .topbar .back,#storyPage .closing .end-link):hover::after, :is(#storyPage .topbar .back,#storyPage .closing .end-link):focus-visible::after{ opacity:.55; } @keyframes order-btn-shine{ from{left:-45%} to{left:120%} } @media(max-width:600px){ :is(#storyPage .topbar .back,#storyPage .closing .end-link){ min-width:200px; height:54px; font-size:13px; letter-spacing:1.8px; } } :is(#storyPage .topbar .back,#storyPage .closing .end-link){min-width:240px;height:48px;min-height:48px;padding:0 24px;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.4;letter-spacing:1.2px;gap:10px} :is(#storyPage .topbar .back,#storyPage .closing .end-link)::before,:is(#storyPage .topbar .back,#storyPage .closing .end-link)::after{pointer-events:none} @media(max-width:600px){:is(#storyPage .topbar .back,#storyPage .closing .end-link){min-width:220px;height:46px;min-height:46px;font-size:11px;letter-spacing:1px}} /* Story and menu share the same light parchment background. */ html:has(#storyPage){background:#f4e4c4} body#story-top{ background-color:#f4e4c4!important; background-image:radial-gradient(ellipse at 0% 15%,#c79b5650,transparent 55%),radial-gradient(ellipse at 100% 85%,#ba864335,transparent 60%),repeating-linear-gradient(12deg,#a8834c05 0px,#a8834c05 1px,transparent 1px,transparent 4px),linear-gradient(110deg,#f4e4c4,#fff4dc 48%,#ecd6b0)!important; } #storyPage .family:after{background:#f4e4c4!important}