/* Shaadi Vaala Ghar — a digital home for a wedding. Rules taken from Sankalp's Theme.swift, which is his own design standard: ONE hairline at one weight; depth comes from surface lightness, never from decorative coloured borders; titles and body are different colours; nothing shouts. Scale and breathing room are Apple's: large type, wide margins, air. No green anywhere — the accent is the gold off their invitation cards. */ :root{ color-scheme: light; /* paper, stepping up in lightness — this is the only way depth is made */ --paper:#FCFAF7; --card:#FFFFFF; --raised:#FFFFFF; --sunk:#F4F0E9; /* ink: titles are darker than body, body darker than notes */ --title:#1C1917; --ink:#3A3531; --body:#5E574F; --note:#857B6F; /* one hairline, one weight */ --hair:rgba(28,25,23,.09); /* one accent, off the monogram; one deeper tone for a single real action */ --gold:#A8812F; --gold-soft:#F3EAD6; --wine:#7A1F3D; --bad:#A4392F; --lift:0 1px 1px rgba(40,32,20,.03), 0 10px 30px -18px rgba(40,32,20,.28); --r:18px; /* ONE family: Apple's San Francisco on an iPhone, iPad or Mac (the system font, in Safari and Chrome alike), the phone's own everywhere else — Segoe on Windows, Roboto on Android — the way Facebook does it. Apple does not allow SF to be sent to other devices as a web font. --display is the same family for names, numbers and titles (it was a serif, which Chrome drew as Iowan Old Style). */ --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --display:var(--sans); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:transparent; color:var(--ink); /* the paper is on , so the watermark fixed behind the body shows through the gutters */ position:relative; z-index:1; font:17px/1.55 var(--sans); -webkit-font-smoothing:antialiased; letter-spacing:-.011em; padding-bottom:calc(70px + env(safe-area-inset-bottom)); } a{color:inherit} h1,h2,h3{margin:0; font-weight:500; color:var(--title); letter-spacing:-.022em} /* nothing in the house is bold: b, strong and th default to bold in every browser */ b,strong,th{font-weight:500} p{margin:0 0 14px; color:var(--body)} p:last-child{margin-bottom:0} img{max-width:100%} .wrap{max-width:1080px; margin:0 auto; padding:0 22px 72px} @media (min-width:900px){ .wrap{padding:0 40px 96px} } .prose{max-width:62ch} .narrow{max-width:760px; margin-left:auto; margin-right:auto} .gap{height:44px} .gap.s{height:28px} .gap.l{height:64px} /* ---- type scale ------------------------------------------------------- */ .display{font-size:clamp(40px,11.5vw,68px); line-height:1.02; letter-spacing:-.035em; font-weight:500} .roomtitle{font-size:clamp(32px,8.5vw,46px); line-height:1.06; letter-spacing:-.03em; margin:0 0 10px} .lede{font-size:19px; line-height:1.5; color:var(--body); margin:0 0 30px; max-width:34em} .eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--note); font-weight:500} .blurb{font-size:17px; color:var(--body); margin:0 0 30px; max-width:34em} .note{color:var(--note); font-size:15px} /* a grey line of explanation is still a line of prose: keep it readable */ p.note,.note p{max-width:62ch; line-height:1.55} .none{color:var(--note); font-size:16px} small{font-size:14px} .today{ display:flex; align-items:center; justify-content:center; gap:8px 18px; flex-wrap:wrap; margin:26px 0 38px; font-size:15px; color:var(--note); } .today b{color:var(--gold); font-weight:500; font-variant-numeric:tabular-nums} .today .c{display:inline-flex; gap:7px; align-items:baseline} .today .city{font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--note)} .today .t{font-variant-numeric:tabular-nums; color:var(--body)} /* ---- feature cards: image on top, words underneath on white ----------- */ .features{display:grid; gap:16px; margin:0 0 16px} @media (min-width:620px){ .features{grid-template-columns:1fr 1fr} } .feature{ display:block; text-decoration:none; background:var(--card); border-radius:var(--r); overflow:hidden; box-shadow:var(--lift); } .feature .shot{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--sunk)} .feature .strip{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--sunk)} .feature .strip img{width:100%; aspect-ratio:1; object-fit:cover; display:block} .feature .cap{padding:20px 22px 22px} .feature .cap h3{font-size:25px; letter-spacing:-.025em} .feature .cap .s{display:block; color:var(--note); font-size:15px; margin-top:5px} /* ---- the room list: big type, one hairline ---------------------------- */ .rooms{margin:0 0 8px; background:var(--card); border-radius:var(--r); box-shadow:var(--lift); overflow:hidden} .rooms a{ display:flex; align-items:center; gap:16px; padding:20px 22px; text-decoration:none; color:inherit; border-top:1px solid var(--hair); } .rooms a:first-child{border-top:0} .rooms a:hover{background:var(--sunk)} .rooms .n{display:block; font-size:21px; font-weight:460; letter-spacing:-.022em; color:var(--title)} .rooms .s{display:block; font-size:15px; color:var(--note); margin-top:3px} .rooms .r{margin-left:auto; color:var(--note); font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap} .rooms .chev{margin-left:8px; color:#C9C0B4} /* ---- quiet links row --------------------------------------------------- */ .doors{display:flex; flex-wrap:wrap; gap:10px; margin:0} .doors a{ text-decoration:none; font-size:15px; color:var(--body); background:var(--card); border-radius:12px; padding:12px var(--bx); box-shadow:var(--lift); } .doors a:hover{color:var(--title)} /* ---- section heading --------------------------------------------------- */ .sec{display:flex; align-items:baseline; gap:12px; margin:0 0 14px; padding:0 20px} .sec h2{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--body); font-weight:500} .sec a{margin-left:auto; font-size:15px; color:var(--gold); text-decoration:none} .group > h2{padding-left:20px} /* ---- cards, buttons ---------------------------------------------------- */ .panel{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:24px} .onething{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:26px 24px; margin:0 0 16px} .onething .lede2{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; font-weight:500} .onething .what{font-size:23px; line-height:1.32; letter-spacing:-.024em; color:var(--title)} .onething .sub{color:var(--note); font-size:15px; margin:12px 0 20px} .onething.calm .what{font-size:19px; color:var(--body); font-weight:400} /* ---- ONE button system -------------------------------------------------- Two sizes: the button (44px) and the small one (36px, .sm) for rows and cards. One meaning per colour: GOLD does the thing (post, save, done, add), GREY goes somewhere or offers a choice, TEXT is minor (not now, cancel, copy), RED TEXT removes, and INK means pressed or chosen. Nothing else. */ .acts{display:flex; gap:10px; flex-wrap:wrap; align-items:center} .acts form{display:inline-flex} button,.btn{ font:inherit; font-size:15.5px; font-weight:460; cursor:pointer; white-space:nowrap; border:0; background:var(--sunk); color:var(--title); line-height:1; border-radius:980px; padding:0 var(--bx); height:44px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; letter-spacing:-.01em; box-sizing:border-box; vertical-align:middle; } button:hover,.btn:hover{background:#EAE3D7} button.sm,.btn.sm{height:36px; padding:0 var(--bx); font-size:14px; gap:6px} button.big,.btn.big{height:52px; padding:0 26px; font-size:17px} button.gold,.btn.gold,button.primary,.btn.primary{background:var(--gold); color:#FFFDF9} button.gold:hover,.btn.gold:hover,button.primary:hover,.btn.primary:hover{background:#96721F} button.quiet,.btn.quiet{background:transparent; color:var(--body); padding-left:var(--bx); padding-right:var(--bx)} button.quiet:hover,.btn.quiet:hover{color:var(--title); background:var(--sunk)} button.danger,.btn.danger{background:transparent; color:var(--bad); padding-left:var(--bx); padding-right:var(--bx)} button.danger:hover,.btn.danger:hover{background:color-mix(in srgb, var(--bad) 8%, #FFFFFF)} button[aria-pressed=true],.btn[aria-pressed=true]{background:var(--title); color:#FFFDF9} button.ico,.btn.ico{width:36px; padding:0} button.ico svg,.btn.ico svg{width:18px; height:18px} button:disabled{opacity:.55; cursor:default} .linky{color:var(--gold); text-decoration:none; font-size:16px} /* ---- the strip you tap when something is new -------------------------- */ .newstrip{ display:flex; align-items:center; gap:12px; text-decoration:none; background:var(--gold-soft); border-radius:14px; padding:15px 18px; margin:0 0 16px; color:var(--title); font-size:16px; } .newstrip .arrow{margin-left:auto; color:var(--gold)} /* ---- entries ----------------------------------------------------------- */ .entry{background:var(--card); border-radius:16px; padding:20px 22px; margin-bottom:12px; box-shadow:var(--lift)} .entry.is-done{background:transparent; box-shadow:none; padding-left:0; padding-right:0} .entry.is-done p{color:var(--note)} .entry-body{display:block; text-decoration:none; color:inherit} .entry p{font-size:17px; color:var(--ink)} .meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; font-size:14px; color:var(--note)} .meta a{color:var(--body)} .meta .dot{opacity:.4} .meta .waiting{color:var(--wine)} .meta .ok{color:var(--gold)} .meta .just-us{color:var(--gold)} .due{font-variant-numeric:tabular-nums} .due.soon{color:var(--gold)} .due.late{color:var(--bad)} .tag{color:var(--gold); text-decoration:none} .answer{margin-top:14px; padding:16px 18px 16px var(--bx); background:var(--sunk); border-radius:12px; font-size:16px; color:var(--ink)} .shots{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px} .shots img{width:96px; height:96px; object-fit:cover; border-radius:12px; display:block} .filechip{font-size:15px; color:var(--body); background:var(--sunk); border-radius:10px; padding:9px var(--bx); text-decoration:none} /* ---- post box ---------------------------------------------------------- */ .post{background:var(--card); border-radius:16px; padding:18px; margin-bottom:16px; box-shadow:var(--lift)} .post textarea{width:100%; border:0; resize:vertical; font:inherit; color:inherit; background:transparent; padding:4px 2px; outline:none; min-height:62px} .post textarea::placeholder{color:var(--note)} .post-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; border-top:1px solid var(--hair); padding-top:14px; margin-top:10px} .pick{display:flex; align-items:center; gap:7px; font-size:15px; color:var(--note)} .pick select,.pick input[type=date]{font:inherit; font-size:15px; border:0; background:var(--sunk); color:var(--ink); border-radius:10px; padding:8px 10px} .pick.file{background:var(--sunk); border-radius:980px; padding:0 var(--bx); height:36px; cursor:pointer; color:var(--title); font-size:14px; font-weight:460; letter-spacing:-.01em; display:inline-flex; align-items:center} .pick.file:hover{background:#EAE3D7} /* a file picker inside a stacked form is a button, not an uppercase label */ form.stack label.pick.file,form.stack .pick.file{text-transform:none; letter-spacing:-.01em; font-size:14px; margin:0; font-weight:460; color:var(--title)} .pick.file input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none} .post-row button[type=submit]{margin-left:auto} .pick select,.pick input[type=date]{height:36px} /* ---- photographs -------------------------------------------------------- */ .albums{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; margin-bottom:28px} .album{display:block; text-decoration:none; color:inherit; background:var(--card); border-radius:var(--r); overflow:hidden; box-shadow:var(--lift)} .album .shot{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 28%; display:block; background:var(--sunk)} .album .empty{ width:100%; aspect-ratio:4/3; background:linear-gradient(160deg,#F6EFE2,#EFE5D3); display:flex; align-items:center; justify-content:center; } .album .empty span{font-family:var(--display); font-size:34px; color:#C9BBA2; letter-spacing:-.02em} .album .empty img{width:96px; opacity:.5} .album .cap{padding:18px 20px 20px; min-height:86px} .album .cap .n{display:block; font-size:21px; font-weight:460; letter-spacing:-.022em; color:var(--title)} .album .cap .s{display:block; font-size:15px; color:var(--note); margin-top:4px} /* A grid of photographs keeps each picture whole. Every tile carries its own ratio (--r) and the row is justified: tiles share a height, grow together to fill the width, and nobody's head is cut off. The last row is held at its base height by an invisible filler. */ .photos{display:flex; flex-wrap:wrap; gap:6px; --row:190px} .photos > a,.photos > label,.photos > .here{ --r:1; position:relative; display:block; min-width:0; flex:calc(var(--r) * 100) 1 calc(var(--r) * var(--row)); max-width:calc(var(--r) * var(--row) * 1.9); aspect-ratio:var(--r); border-radius:12px; overflow:hidden; background:var(--sunk); } .photos::after{content:""; flex:99999 1 0; min-width:0} .photos img{width:100%; height:100%; object-fit:cover; display:block} @media (max-width:640px){ .photos{--row:120px; gap:4px} } .photos .hearts{position:absolute; right:9px; bottom:8px; font-size:13px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.55)} .photoview{background:var(--card); border-radius:var(--r); overflow:hidden; box-shadow:var(--lift); margin-bottom:20px} /* one photograph, whole, in one screen */ .photoview img{display:block; width:auto; max-width:100%; max-height:min(70vh,700px); margin:0 auto} .photoview{padding:20px 20px 0} .photoview .cap{padding:18px 4px 22px; max-width:68ch} .photoview .cap{padding:22px 24px} .hearted{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:15px; color:var(--note); margin-top:16px} /* ---- studio ------------------------------------------------------------- */ .piece{background:var(--card); border-radius:var(--r); overflow:hidden; box-shadow:var(--lift); margin-bottom:20px} .piece > img{width:100%; display:block; background:var(--sunk)} .piece video{width:100%; display:block; background:#100D08} .piece .body{padding:22px 24px 24px} .piece .body h3{font-size:23px; letter-spacing:-.024em; margin-bottom:6px} /* ---- lists -------------------------------------------------------------- */ .list{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); overflow:hidden} .list .row,.list a.row{display:flex; gap:14px; align-items:center; padding:18px 20px; border-top:1px solid var(--hair); text-decoration:none; color:inherit} .list .row:first-child,.list a.row:first-child{border-top:0} .list a.row:hover{background:var(--sunk)} .list .row .t{display:block; font-size:17px; font-weight:460; color:var(--title); letter-spacing:-.016em} .list .row .s{display:block; color:var(--note); font-size:15px; margin-top:3px} .list .row .r{margin-left:auto; color:var(--note); font-size:15px; text-align:right; white-space:nowrap} .group{margin-bottom:34px} .cards2{display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:14px} /* Eight groups of one or two people each made eight half-empty rows. One grid, and the group becomes a line on the card. */ .percard .k{display:block; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--note); margin-bottom:7px} .percard{ display:block; text-decoration:none; color:inherit; background:var(--card); border-radius:14px; box-shadow:var(--lift); padding:18px 20px; } .percard:hover{background:var(--sunk)} .percard .t{display:block; font-size:17px; font-weight:460; color:var(--title); letter-spacing:-.016em} .percard .s{display:block; font-size:14.5px; color:var(--note); margin-top:4px} .percard .ph{display:block; font-size:14.5px; color:var(--gold); margin-top:8px; font-variant-numeric:tabular-nums} .group > h2{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--note); margin-bottom:12px; font-weight:500} .bar{height:5px; border-radius:5px; background:var(--sunk); overflow:hidden; margin:14px 0 8px} .bar span{display:block; height:100%; background:var(--gold)} .phase{background:var(--card); border-radius:var(--r); padding:22px 24px; margin-bottom:14px; box-shadow:var(--lift)} .phase h3{font-size:21px; letter-spacing:-.022em} .phase .n{font-size:15px; color:var(--note)} /* ---- forms --------------------------------------------------------------- */ form.stack{display:flex; flex-direction:column; gap:18px; background:var(--card); border-radius:var(--r); padding:24px; box-shadow:var(--lift); margin-bottom:24px} form.stack label{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--body); display:block; margin-bottom:8px; font-weight:500} form.stack input[type=text],form.stack input[type=date],form.stack input[type=datetime-local],form.stack input[type=url],form.stack input[type=tel],form.stack input[type=number],form.stack input[type=email],form.stack input[type=time],form.stack input[type=search],form.stack select,form.stack textarea{ width:100%; font:inherit; border:0; border-radius:12px; padding:14px var(--bx); background:var(--sunk); color:var(--ink); } form.stack textarea{min-height:130px; resize:vertical; line-height:1.6} .two{display:flex; gap:16px; flex-wrap:wrap} .two > *{flex:1 1 180px} .back{display:inline-block; color:var(--note); text-decoration:none; font-size:16px; padding:20px 0 10px} .back:hover{color:var(--gold)} .filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px} .filters a{font-size:14.5px; color:var(--body); text-decoration:none; border-radius:980px; padding:0 var(--bx); height:36px; display:inline-flex; align-items:center; background:var(--card); box-shadow:var(--lift)} .filters a[aria-current=true]{background:var(--title); color:#FFFDF9} .search{display:flex; gap:10px; margin-bottom:22px} .search input{flex:1; font:inherit; border:0; border-radius:12px; padding:14px var(--bx); background:var(--card); box-shadow:var(--lift)} .page-body{ background:var(--card); border-radius:var(--r); padding:40px 44px; box-shadow:var(--lift); line-height:1.7; font-size:17.5px; color:var(--ink); } .page-body p{margin:0 0 18px; max-width:66ch} .page-body p:last-child{margin-bottom:0} .page-body h3{ font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--note); font-weight:500; margin:34px 0 12px; } .page-body h3:first-child{margin-top:0} @media (max-width:640px){ .page-body{padding:26px 22px} } .link-line{font-size:14px; color:var(--body); word-break:break-all; background:var(--sunk); padding:12px var(--bx); border-radius:10px} /* ---- ask ---------------------------------------------------------------- */ .askbar{ display:flex; gap:10px; align-items:center; margin-bottom:16px; background:linear-gradient(135deg,#1F1B14 0%,#2E2416 55%,#3C2D17 100%); border-radius:980px; padding:9px 9px 9px 24px; box-shadow:0 1px 1px rgba(40,32,20,.06), 0 14px 34px -20px rgba(40,32,20,.55); } .askbar input{flex:1; border:0; background:transparent; font:inherit; font-size:16px; padding:12px 0; outline:none; color:#F6EFE0} .askbar input::placeholder{color:#A2937C} .askbar .mark{color:#D9B368; font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; white-space:nowrap} .askbar button{background:var(--gold); color:#17140F; font-weight:500; height:40px} .askbar button:hover{background:#C9993C} .askbar button:disabled{background:#4A3B22; color:#9A8A6E; cursor:default} .answerbox{background:var(--card); border-radius:var(--r); padding:24px; margin-bottom:24px; line-height:1.6; white-space:pre-wrap; box-shadow:var(--lift); font-size:17px; color:var(--ink)} /* ---- wedding week -------------------------------------------------------- */ .slot{display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--hair)} .slot:first-child{border-top:0} .slot .when{width:82px; flex:none; font-variant-numeric:tabular-nums; font-size:16px; color:var(--note)} .slot .what{font-weight:460; color:var(--title); font-size:17px} .slot .who{font-size:15px; color:var(--note); margin-top:3px} .slot.now .when{color:var(--gold); font-weight:500} .slot.now .what{color:var(--gold)} .slot.past{opacity:.42} .storm-note{background:var(--gold-soft); border-radius:var(--r); padding:24px; margin-bottom:20px; line-height:1.6; color:var(--ink)} .storm-note h2{font-size:21px; margin-bottom:12px} .weather{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:-14px 0 34px; font-size:15px; color:var(--note)} .weather form{display:flex; gap:8px} .weather button{font-weight:500} /* ---- bottom bar: a phone's thumbs, and nowhere else ------------------------ */ .tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; background:rgba(252,250,247,.9); -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); border-top:1px solid var(--hair); padding-bottom:env(safe-area-inset-bottom); } .tabbar a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; position:relative; padding:9px 4px 8px; font-size:11px; color:var(--note); text-decoration:none; letter-spacing:-.004em; } .tabbar a svg{width:23px; height:23px} .tabbar a[aria-current=page]{color:var(--title); font-weight:500} @media (min-width:640px){ body{padding-bottom:0} .wrap{padding-left:28px; padding-right:28px} .tabbar{display:none} } /* ---- the tile grid, the way apple.com lays out its lineup --------------- Headline at the top, a short line under it, the picture filling the foot. Sizes vary on purpose: two big picture tiles, then number tiles in pairs, and one dark tile so the page has some weight in it. */ .tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:0 0 14px} @media (min-width:900px){ .tiles{grid-template-columns:repeat(4,1fr); gap:18px} } .tile.half{grid-column:span 2} .tile{ position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--card); border-radius:22px; overflow:hidden; box-shadow:var(--lift); padding:32px 20px 0; text-align:center; transition:transform .25s cubic-bezier(.2,.7,.3,1); } .tile:hover{transform:translateY(-3px)} .tile.full{grid-column:1 / -1} .tile h3{font-size:clamp(24px,6vw,32px); line-height:1.1; letter-spacing:-.03em} .tile .s{display:block; color:var(--note); font-size:16px; margin-top:8px; padding:0 8px} .tile .go{display:block; color:var(--gold); font-size:16px; margin-top:12px} .tile .art{display:block; width:calc(100% + 40px); margin:26px -20px 0; margin-top:auto; object-fit:cover} .tile.full .art{aspect-ratio:2/1} .tile.half .art{aspect-ratio:16/10} .tile.full .collage{aspect-ratio:auto; grid-template-columns:repeat(4,1fr)} .tile.full .collage img{aspect-ratio:1} /* four pictures as a 2x2 block, so it stands as tall as a painting beside it */ .tile .collage{ display:grid; grid-template-columns:1fr 1fr; gap:3px; width:calc(100% + 40px); margin:26px -20px 0; margin-top:auto; aspect-ratio:16/10; } .tile .collage img{width:100%; height:100%; object-fit:cover; display:block} .tile.dark{background:#17140F; color:#F6F1E6} .tile.dark h3{color:#FFFDF8} .tile.dark .s{color:#B7AC9A} .tile.dark .go{color:#D9B368} .tile.num{padding:32px 20px 34px; display:flex; flex-direction:column; justify-content:center; min-height:172px} .tile.num .big{font-size:clamp(46px,13vw,64px); line-height:1; font-weight:500; letter-spacing:-.045em; color:var(--title)} .tile.num.sm .big{font-size:clamp(26px,5.6vw,34px); letter-spacing:-.03em; word-break:normal} .tile.num .cap{display:block; font-size:16px; color:var(--note); margin-top:10px} .tile.num .k{display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--note); margin-bottom:12px; font-weight:500} .tile.tint{background:linear-gradient(180deg,#FBF3E2 0%,#F7EAD2 100%)} .tile.tint .big{color:var(--gold)} /* a wide, quiet tile for the things that are just a door */ .tile.slim{padding:24px 20px; min-height:0; display:flex; align-items:center; gap:14px; text-align:left} .tile.slim h3{font-size:20px; letter-spacing:-.022em} .tile.slim .s{margin-top:3px; padding:0; font-size:15px} .tile.slim .r{margin-left:auto; color:var(--note); font-size:15px; white-space:nowrap} /* ---- a link out to someone else's album --------------------------------- */ .outlink{display:block; text-decoration:none; color:inherit; background:var(--card); border-radius:var(--r); overflow:hidden; box-shadow:var(--lift); margin-bottom:22px} .outlink img{width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:var(--sunk)} .outlink .cap{padding:20px 22px; display:flex; align-items:center; gap:14px} .outlink .cap .t{font-size:18px; font-weight:460; color:var(--title)} .outlink .cap .s{font-size:15px; color:var(--note); margin-top:3px} .outlink .cap .go{margin-left:auto; color:var(--gold); font-size:16px; white-space:nowrap} /* ---- what the filing assistant decided ---------------------------------- */ .filed{background:var(--gold-soft); border-radius:14px; padding:16px 18px; margin-bottom:16px; font-size:16px; color:var(--ink)} .filed a{color:var(--gold); text-decoration:none} /* ---- putting things in, from the room they belong to --------------------- */ .dropbox{ background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:22px 24px; margin-bottom:26px; display:flex; gap:18px 24px; align-items:center; flex-wrap:wrap; } .dropbox > span:first-child{flex:1 1 280px} .dropbox .lead{font-size:17px; color:var(--title); font-weight:460} .dropbox .sub{font-size:15px; color:var(--note); margin-top:3px} .dropbox form{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-left:auto} .dropbox select, .dropbox input[type=text]{font:inherit; font-size:15px; border:0; background:var(--sunk); border-radius:10px; padding:11px 14px; color:var(--ink)} /* ---- the tracker --------------------------------------------------------- */ .addtask{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:22px; background:var(--card); border-radius:14px; padding:14px 16px; box-shadow:var(--lift); } .addtask input[type=text]{flex:1 1 280px; font:inherit; font-size:17px; border:0; background:transparent; outline:none; padding:8px 4px; color:var(--ink)} .addtask input[type=text]::placeholder{color:var(--note)} .addtask select,.addtask input[type=date]{font:inherit; font-size:15px; border:0; background:var(--sunk); border-radius:10px; padding:10px 12px; color:var(--ink)} .qrow{display:flex; gap:16px; align-items:flex-start; padding:16px 20px; border-top:1px solid var(--hair); text-decoration:none; color:inherit} .qrow:first-child{border-top:0} .qrow:hover{background:var(--sunk)} .qrow .q{flex:1; font-size:16.5px; line-height:1.45; color:var(--ink)} .qrow .s{display:block; font-size:14px; color:var(--note); margin-top:5px} .qrow .r{color:var(--note); font-size:14px; white-space:nowrap; padding-top:2px} .tasks{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); overflow:hidden} .task{display:flex; align-items:center; gap:14px; padding:14px 18px; border-top:1px solid var(--hair)} .task:first-child{border-top:0} .task .what{flex:1; text-decoration:none; color:var(--ink); font-size:17px; line-height:1.4} .task .what:hover{color:var(--gold)} .task .meta2{display:flex; gap:12px; align-items:center; white-space:nowrap; font-size:14px; color:var(--note)} .task .who{color:var(--body)} .task.is-done .what{color:var(--note); text-decoration:line-through; text-decoration-color:var(--hair)} .tickform{display:flex} .tick{ width:26px; height:26px; border-radius:50%; padding:0; flex:none; display:inline-grid; place-items:center; background:transparent; box-shadow:inset 0 0 0 1.6px #D5CBBA; color:transparent; font-size:14px; line-height:1; cursor:pointer; } .tick:hover{box-shadow:inset 0 0 0 1.6px var(--gold); background:transparent} .tick.on{background:var(--gold); box-shadow:none; color:#FFFDF8; font-weight:500} .tasks.late .task .due{color:var(--bad)} .task.money .what{display:block} .task .sub2{display:block; font-size:14px; color:var(--note); margin-top:3px} .task .amt{font-variant-numeric:tabular-nums; color:var(--title); font-weight:460; min-width:96px; text-align:right} .task .amt.est{color:var(--body); font-weight:400} .task .paid{color:var(--gold)} /* ---- the paper, and the layer behind every page that the house's wash is painted on (its dress: the rule under "the wash", below) -------------------- */ html{background:var(--paper)} html::before{content:""; position:fixed; z-index:0; pointer-events:none} /* ---- the head of the page: a profile, not a poster ---------------------- */ .topcard{ background:var(--card); border-radius:22px; box-shadow:var(--lift); overflow:hidden; margin:22px 0 26px; } .topcard .cover{ height:126px; position:relative; overflow:hidden; background:linear-gradient(118deg,#F8F2E6 0%,#EFE5D1 52%,#F7F1E4 100%); } .topcard .cover::after{ /* one hairline of gold, as on the cards */ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.4; } /* only the faces climb into the cover; the name and the numbers stay below it, or the title ends up printed over the gradient */ .topcard .ident{ display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap; padding:14px 30px 20px; } .topcard .pair{display:flex; flex:none; margin-top:-62px} .topcard .pair img{ width:88px; height:88px; border-radius:50%; object-fit:cover; display:block; background:var(--sunk); box-shadow:0 0 0 4px var(--card), 0 8px 22px -12px rgba(40,32,20,.5); } .topcard .pair img + img{margin-left:-26px} .topcard .who{flex:1 1 440px; min-width:0; padding-bottom:3px} .topcard .who h1{ font-family:var(--display); font-weight:500; letter-spacing:-.022em; line-height:1.05; font-size:clamp(28px,4vw,40px); } .topcard .who p{margin:7px 0 0; font-size:14.5px; color:var(--note)} .topcard .stats{display:flex; border-top:1px solid var(--hair)} .topcard .st{ flex:1 1 0; min-width:0; padding:15px 8px; text-align:center; text-decoration:none; color:inherit; border-left:1px solid var(--hair); } .topcard .st:first-child{border-left:0} a.st:hover{background:var(--sunk)} .topcard .st b{ display:block; font-size:20px; font-weight:500; color:var(--title); font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .topcard .st b.night{color:var(--note)} .topcard .st em{ display:block; font-style:normal; margin-top:3px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--note); } /* how the day is going, kept small and to one side */ .topcard .mood{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-left:auto; font-size:14px; color:var(--note); padding-bottom:5px} .topcard .mood form{display:flex; gap:6px} .topcard .mood button{height:34px; padding:0 14px; font-size:14px; font-weight:500} .topcard .mood .theirs b{color:var(--body); font-weight:460} @media (max-width:700px){ .topcard{margin:14px 0 20px} .topcard .cover{height:104px} .topcard .ident{padding:12px 20px 16px; gap:14px} .topcard .pair{margin-top:-48px} .topcard .pair img{width:70px; height:70px} .topcard .stats{flex-wrap:wrap} .topcard .st{flex:1 1 33%; padding:13px 6px} .topcard .st:nth-child(4){border-left:0} .topcard .st b{font-size:18px} } /* ---- the doors: everything one tap away, along the top ------------------ */ .dock{ display:flex; gap:10px; overflow-x:auto; margin:0 0 30px; padding:4px 0 10px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .dock::-webkit-scrollbar{display:none} .door{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:9px; text-decoration:none; color:var(--body); width:84px; text-align:center; } .door .disc{ width:62px; height:62px; border-radius:50%; background:var(--card); box-shadow:var(--lift); display:grid; place-items:center; font-size:23px; line-height:1; overflow:hidden; transition:transform .2s cubic-bezier(.2,.7,.3,1); } .door:hover .disc{transform:translateY(-3px)} .door .nm{font-size:13px; letter-spacing:-.008em; line-height:1.25} .door .badge{ position:absolute; transform:translate(22px,-24px); background:var(--gold); color:#FFFDF8; font-size:11px; font-weight:500; border-radius:980px; padding:2px 7px; line-height:1.4; } .door .disc img{width:100%; height:100%; min-height:100%; object-fit:cover; border-radius:50%; display:block} /* ---- the feed ------------------------------------------------------------ */ .composer{background:var(--card); border-radius:18px; box-shadow:var(--lift); padding:18px 20px; margin-bottom:22px} .composer .top{display:flex; gap:14px; align-items:flex-start} .composer textarea{flex:1; border:0; resize:vertical; font:inherit; font-size:18px; background:transparent; outline:none; min-height:56px; padding:10px 0; color:var(--ink)} .composer textarea::placeholder{color:var(--note)} .composer .row{display:flex; gap:12px; align-items:center; flex-wrap:wrap; border-top:1px solid var(--hair); padding-top:14px; margin-top:8px} .composer .row button[type=submit]{margin-left:auto} .avatar{ width:46px; height:46px; border-radius:50%; flex:none; object-fit:cover; background:var(--sunk); display:grid; place-items:center; font-size:16px; font-weight:500; color:var(--note); letter-spacing:-.01em; } .avatar.sm{width:34px; height:34px; font-size:13px} .post{background:var(--card); border-radius:18px; box-shadow:var(--lift); margin-bottom:16px; overflow:hidden} .post .head{display:flex; gap:13px; align-items:center; padding:18px 20px 0} .post .head .nm{font-weight:500; color:var(--title); font-size:16px} .post .head .tm{font-size:14px; color:var(--note)} .post .head .pill{margin-left:auto; font-size:13px; color:var(--gold)} .post .say{padding:14px 20px 0; font-size:17.5px; line-height:1.5; color:var(--ink)} .post .pics{display:grid; gap:3px; margin-top:16px} .post .pics.n1{grid-template-columns:1fr} .post .pics.n2{grid-template-columns:1fr 1fr} .post .pics.n3,.post .pics.n4{grid-template-columns:1fr 1fr} .post .pics img{width:100%; display:block; object-fit:cover; aspect-ratio:4/3; background:var(--sunk)} .post .pics.n1 img{aspect-ratio:auto; max-height:520px; object-fit:cover} .post .foot{display:flex; gap:8px; align-items:center; padding:14px 18px; flex-wrap:wrap} .post .foot .who2{font-size:14px; color:var(--note)} .post .replies{border-top:1px solid var(--hair); padding:14px 20px; display:flex; flex-direction:column; gap:14px} .post .reply{display:flex; gap:12px; align-items:flex-start} .post .reply .bod{font-size:16px; color:var(--ink); line-height:1.45} .post .reply .nm{font-weight:500; color:var(--title)} .post .replybox,.post.replybox{display:flex; gap:10px; align-items:center; border-top:1px solid var(--hair); padding:12px 18px} .post .replybox input,.post.replybox input{flex:1 1 0; min-width:0; border:0; background:var(--sunk); border-radius:980px; padding:11px 16px; font:inherit; font-size:15px; outline:none; color:var(--ink)} /* ---- the studio: the film at a sane size, the cards as a grid ------------ */ /* The film stands beside what it is, rather than floating in a black field. */ .filmwrap{display:grid; grid-template-columns:minmax(0,360px) 1fr; background:var(--card); border-radius:var(--r); overflow:hidden; box-shadow:var(--lift); margin-bottom:34px} .filmstage{background:#100D08; display:flex; align-items:center; justify-content:center} .filmwrap video{display:block; width:100%; max-height:min(66vh,600px); background:#100D08} .filmcap{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:7px; padding:34px 38px} .filmcap .k{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--note)} .filmcap .t{font-family:var(--display); font-size:31px; line-height:1.15; color:var(--title); letter-spacing:-.01em} .filmcap .s{font-size:16px; color:var(--body); line-height:1.55; max-width:36ch} .filmcap form{margin-top:12px} @media (max-width:680px){ .filmwrap{grid-template-columns:1fr} .filmcap{padding:22px 24px} } .cardgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px} .cardtile{display:block; text-decoration:none; color:inherit; background:var(--card); border-radius:16px; overflow:hidden; box-shadow:var(--lift)} .cardtile img{width:100%; aspect-ratio:2/3; object-fit:cover; object-position:top center; display:block; background:var(--sunk)} .cardtile .cap{display:block; padding:14px 16px 16px} .cardtile .cap .t{display:block; font-size:16px; font-weight:460; color:var(--title)} .cardtile .cap .s{display:block; font-size:14px; color:var(--note); margin-top:3px; min-height:1.2em} /* A card and a film are both things you want to SEE, whole, without scrolling. Cap them by height, not width, and let the paper show around them. */ .piece video{max-width:420px; margin:0 auto; max-height:min(64vh,620px)} .piece > img{width:auto; max-width:100%; max-height:min(70vh,680px); margin:0 auto; object-fit:contain} .piece{padding:22px 22px 0; background:var(--card)} .piece .body{padding:18px 2px 22px; max-width:68ch} /* a fold-out for settings that should not shout over the content; the chevron is drawn, not a glyph, so it sits on the text's own line */ .foldout{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:18px 22px; margin-bottom:24px} .foldout > summary{cursor:pointer; font-size:15.5px; color:var(--body); list-style:none; display:flex; align-items:center; gap:12px} .foldout > summary::-webkit-details-marker{display:none} .foldout > summary::before{ content:""; flex:none; width:8px; height:8px; margin:-4px 2px 0 2px; border-right:1.6px solid var(--gold); border-bottom:1.6px solid var(--gold); transform:rotate(45deg); transition:transform .2s ease, margin .2s ease; } .foldout[open] > summary::before{transform:rotate(-135deg); margin-top:4px} .foldout[open] > summary{margin-bottom:18px} /* open, its first label is not under the line */ .foldout form.stack{box-shadow:none; padding:0; margin-bottom:0; background:transparent} /* a floor for the archive, rather than an endless scroll */ .pager{display:flex; gap:12px; justify-content:center; margin:30px 0 8px} /* ---- the house at a glance, beside the conversation ---------------------- */ .twocol{display:grid; grid-template-columns:minmax(0,1fr) 296px; gap:30px; align-items:start} .stream{min-width:0} .rail{position:sticky; top:78px; display:grid; gap:16px; align-content:start} .glance{display:block; background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:18px 20px 20px; color:inherit; text-decoration:none} a.glance:hover{box-shadow:var(--lift-2)} .gl-h{display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--body); font-weight:500; margin-bottom:10px} .gl-big{display:block; font-family:var(--display); font-size:30px; line-height:1.1; color:var(--title)} .gl-sub{display:block; font-size:13.5px; color:var(--body); margin-top:5px} .glance .bar{display:block; height:5px; border-radius:3px; background:var(--sunk); margin:11px 0 3px; overflow:hidden} .glance .bar i{display:block; height:100%; background:var(--gold)} .gl-list{list-style:none; margin:0; padding:0; display:grid; gap:11px} .gl-list li{display:block; font-size:14.5px; line-height:1.4} .gl-list a{display:block; color:var(--ink); text-decoration:none} .gl-list a:hover{color:var(--wine)} .gl-list em{display:block; font-style:normal; font-size:12.5px; color:var(--note); margin-top:2px} .gl-more{display:block; margin-top:14px; font-size:13.5px; color:var(--gold); text-decoration:none} .gl-shots{display:grid; grid-template-columns:repeat(2,1fr); gap:5px; margin-bottom:4px} .gl-shots img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:7px; display:block} /* a post is a thing someone said, not a paragraph of a book */ .feed .say,.say{max-width:66ch} @media (max-width:1000px){ .twocol{grid-template-columns:1fr; gap:22px} .rail{position:static; grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:620px){ .rail{grid-template-columns:1fr} } /* One measure for every piece of running text in the house. Wider than this and the eye loses the start of the next line. */ .entry > p,.onething .what,.percard .what,p.none,.qrow .q{max-width:68ch} /* On a phone a sideways rail hides half the house behind a swipe nobody sees. Lay the doors out like an app's home screen instead: every one of them there. */ @media (max-width:680px){ .dock{display:grid; grid-template-columns:repeat(5,1fr); gap:18px 6px; overflow:visible; padding:4px 0 6px} .door{width:auto} .door .disc{width:54px; height:54px; font-size:20px} .door .nm{font-size:11.5px; line-height:1.2} .door .badge{transform:translate(19px,-21px); font-size:10px; padding:1px 6px} } .askbar input{min-width:0} /* On a phone the "ASK THE HOUSE" mark eats the question. The dark pill says enough. */ @media (max-width:680px){ .askbar .mark{display:none} .askbar{padding-left:18px} } /* A task row on a phone: the tick keeps its column, everything else stacks under the words instead of running off the edge. */ .task .what{min-width:0} @media (max-width:680px){ .task{display:grid; grid-template-columns:26px minmax(0,1fr); gap:7px 12px; align-items:start; padding:14px 16px} .task > *{grid-column:2} .task > .tickform,.task > .num{grid-column:1; grid-row:1} .task .meta2{white-space:normal; flex-wrap:wrap; gap:6px 12px} .task.money{grid-template-columns:minmax(0,1fr)} .task.money > *{grid-column:1} .task .amt{min-width:0; text-align:left; margin-left:auto} } /* The long tail of a to-do list is reference, not work. Fold it. */ .group.fold{margin-bottom:26px} .group.fold > summary{ cursor:pointer; list-style:none; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--note); padding:6px 0 12px; } .group.fold > summary::-webkit-details-marker{display:none} .group.fold > summary::before{ content:""; display:inline-block; width:7px; height:7px; margin:0 10px 1px 3px; border-right:1.6px solid var(--gold); border-bottom:1.6px solid var(--gold); transform:rotate(-45deg); transition:transform .2s ease; } .group.fold[open] > summary::before{transform:rotate(45deg); margin-bottom:3px} .group.fold > summary:hover{color:var(--ink)} /* a flex item's min-content width is its default floor, so on a phone the Send button was pushed clean out of the card */ .post .replybox > *,.post.replybox > *{flex:none} .post .replybox .av,.post.replybox .av{flex:none} /* with no faces the identity row has nothing to climb into the cover */ .topcard .ident:not(:has(.pair)){padding-top:20px} /* ---- news: the count, and the list ----------------------------------------- */ .tabbar a{position:relative} .tabbar .badge,.door .badge{ position:absolute; font-style:normal; background:var(--gold); color:#FFFDF8; font-size:11px; font-weight:500; line-height:1; border-radius:980px; padding:3px 6px; min-width:18px; text-align:center; } .tabbar .badge{top:8px; margin-left:4px; transform:translateY(-2px)} .door{position:relative} .door .badge{top:-3px; right:6px; transform:none} .list.news .row{align-items:center} .list.news .row .t{font-weight:500} .list.news .row.fresh .t{color:var(--title)} .list.news .row.fresh::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none; margin-right:-4px} .list.news .row:not(.fresh) .t{color:var(--body); font-weight:450} .list.news .avatar.sm{flex:none} /* ---- the login page --------------------------------------------------------- */ form.login{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:26px 28px 28px; margin:8px auto 0; max-width:560px} form.login h2{font-size:22px; letter-spacing:-.022em; margin-bottom:14px} .who-list{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px} .whoname{display:inline-flex; align-items:center; gap:8px; cursor:pointer} .whoname input{position:absolute; opacity:0; width:1px; height:1px} .whoname span{display:inline-block; padding:10px var(--bx); border-radius:980px; background:var(--sunk); font-size:15px; font-weight:460; color:var(--title)} .whoname input:checked + span{background:var(--title); color:#FFFDF9} .whoname input:focus-visible + span{outline:2px solid var(--gold); outline-offset:2px} form.login .code{display:block; margin-bottom:18px} form.login .code > span{display:block; font-size:12px; letter-spacing:.11em; text-transform:uppercase; color:var(--note); font-weight:500; margin-bottom:8px} form.login .code input{width:100%; max-width:220px; font:inherit; font-size:26px; letter-spacing:.32em; font-variant-numeric:tabular-nums; border:0; border-radius:12px; padding:12px var(--bx); background:var(--sunk); color:var(--ink); outline:none} form.login .code input:focus{box-shadow:inset 0 0 0 2px var(--gold)} form.login .err{color:var(--bad); font-size:15px; margin:0 0 14px} form.login .acts .note{font-size:14px} .list.news .row .what{flex:1; min-width:0; text-decoration:none; color:inherit} .list.news .row .what:hover .t{color:var(--gold)} /* ---- colour --------------------------------------------------------------------- Every room and every event has one: the doors on the home page, the bar over a room's title, the album tiles, the event name on a money line, the mood buttons. The hues are drapes off painted invitation cards, with a wine and a gold; a house's days take theirs from its own cards (its dress). Tints are the same hue at a fifth. */ :root{ --c-rose:#C05C7E; --c-peach:#C77A4A; --c-marigold:#C9931C; --c-leaf:#4F7A5A; --c-teal:#2F7F86; --c-slate:#5B7391; --c-plum:#7B4B8E; --c-red:#B03A48; --c-wine:#7A1F3D; --c-gold:#A8812F; } /* the doors */ .door .disc{color:var(--c, var(--title)); background:color-mix(in srgb, var(--c, var(--title)) 14%, #FFFFFF)} .door[href="/news"]{--c:var(--c-wine)} .door[href="/photos"]{--c:var(--c-rose)} .door[href="/invites"]{--c:var(--c-marigold)} .door[href="/plan"]{--c:var(--c-leaf)} .door[href="/money"]{--c:var(--c-gold)} .door[href="/documents"]{--c:var(--c-peach)} .door[href="/guests"]{--c:var(--c-teal)} .door[href="/people"]{--c:var(--c-slate)} .door[href="/notes"]{--c:var(--c-plum)} .door[href="/story"]{--c:var(--c-red)} .door .badge{background:var(--c-wine)} /* the room */ .wrap[data-room="/news"]{--c:var(--c-wine)} .wrap[data-room="/photos"]{--c:var(--c-rose)} .wrap[data-room="/invites"]{--c:var(--c-marigold)} .wrap[data-room="/plan"]{--c:var(--c-leaf)} .wrap[data-room="/money"]{--c:var(--c-gold)} .wrap[data-room="/documents"]{--c:var(--c-peach)} .wrap[data-room="/guests"]{--c:var(--c-teal)} .wrap[data-room="/people"]{--c:var(--c-slate)} .wrap[data-room="/notes"]{--c:var(--c-plum)} .wrap[data-room="/story"]{--c:var(--c-red)} .wrap[data-room="/ask"]{--c:var(--c-wine)} .wrap[data-room="/log"]{--c:var(--c-slate)} .wrap[data-room="/settings"]{--c:var(--c-gold)} .tone{display:block; width:44px; height:4px; border-radius:4px; background:var(--c, var(--gold)); margin:0 0 14px} .wrap:not([data-room]) .tone,.wrap[data-room=""] .tone{background:var(--gold)} .sec h2{color:var(--c, var(--note))} .filters a[aria-current=true]{background:var(--c, var(--title))} .tick.on{background:var(--c, var(--gold))} /* the events */ [data-event="Roka"]{--e:var(--c-wine)} [data-event="Mehendi"]{--e:var(--c-leaf)} [data-event="Sagan"]{--e:var(--c-peach)} [data-event="Haldi"]{--e:var(--c-marigold)} [data-event="Shaadi"]{--e:var(--c-rose)} [data-event="Honeymoon"]{--e:var(--c-teal)} [data-event="Before the wedding"]{--e:var(--c-slate)} [data-event="Inspiration"]{--e:var(--c-plum)} [data-event="Memories"]{--e:var(--c-gold)} .album .empty{background:color-mix(in srgb, var(--e, var(--gold)) 22%, #FFFFFF)} .album .empty span{color:var(--e, var(--gold))} .album .cap .s .ev{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--e, var(--gold)); margin-right:7px; vertical-align:1px} .albums.small{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px} .albums.small .album .empty{aspect-ratio:5/4} .albums.small .album .empty span{font-size:26px} .albums.small .album .cap{padding:12px 16px 14px; min-height:0} .albums.small .album .cap .n{font-size:16px} .albums.small .album .cap .s{font-size:13px; margin-top:2px} .task .who.ev{color:var(--e, var(--body)); font-weight:460} /* the day */ .onething .lede{color:var(--c-wine)} .handoff-strip{background:color-mix(in srgb, var(--c-wine) 9%, #FFFFFF)} .handoff-strip b,.handoff-strip .arrow{color:var(--c-wine)} /* ===================================================================== THE CHROME AN APP HAS: a bar along the top, a footer that says whose home this is, and every colour a person or a tag can wear. ===================================================================== */ /* one name for each tone, so a tag, a face or a date can carry its colour */ [data-tone="rose"]{--tone:var(--c-rose)} [data-tone="peach"]{--tone:var(--c-peach)} [data-tone="marigold"]{--tone:var(--c-marigold)} [data-tone="leaf"]{--tone:var(--c-leaf)} [data-tone="teal"]{--tone:var(--c-teal)} [data-tone="slate"]{--tone:var(--c-slate)} [data-tone="plum"]{--tone:var(--c-plum)} [data-tone="red"]{--tone:var(--c-red)} [data-tone="wine"]{--tone:var(--c-wine)} [data-tone="gold"]{--tone:var(--c-gold)} .avatar[data-tone]{background:color-mix(in srgb, var(--tone) 16%, #FFFFFF); color:var(--tone)} .avatar.xs{width:22px; height:22px; font-size:9.5px} .avatar.big{width:112px; height:112px; font-size:36px} .mention{color:var(--c-wine); text-decoration:none; font-weight:460} .now::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--c-leaf); margin-right:6px; vertical-align:1px} /* ---- the bar along the top ------------------------------------------------ */ .topbar{ position:sticky; top:0; z-index:40; background:rgba(252,250,247,.86); -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--hair); } .tb{max-width:1080px; margin:0 auto; padding:0 40px; height:60px; display:flex; align-items:center; gap:22px} .brand{display:flex; align-items:baseline; gap:11px; text-decoration:none; color:var(--title); white-space:nowrap} .tb-nav{display:flex; gap:2px; margin-left:6px} .tb-nav a{text-decoration:none; color:var(--body); font-size:15px; font-weight:500; padding:8px 13px; border-radius:980px; letter-spacing:-.01em} .tb-nav a:hover{color:var(--title); background:var(--sunk)} .tb-nav a[aria-current=page]{color:var(--title); background:var(--sunk); font-weight:500} .tb-acts{margin-left:auto; display:flex; align-items:center; gap:2px} .tb-acts .ic{position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--body); text-decoration:none} .tb-acts .ic:hover,.tb-acts .ic[aria-current=page]{background:var(--sunk); color:var(--title)} .tb-acts .ic .badge{ position:absolute; top:3px; right:1px; font-style:normal; background:var(--c-wine); color:#FFFDF8; font-size:10.5px; font-weight:500; line-height:1; border-radius:980px; padding:3px 5px; min-width:17px; text-align:center; } .tb-acts .me{margin-left:8px; display:block; line-height:0} .tb-acts .me .avatar{width:34px; height:34px; font-size:13px; box-shadow:0 0 0 2px var(--card)} .tabbar .badge{top:4px; left:calc(50% + 6px); right:auto; margin:0; transform:none; background:var(--c-wine)} @media (max-width:900px){ .tb{padding:0 22px; height:54px; gap:14px} .tb-nav{display:none} } @media (max-width:639px){ /* messages and news live in the bar at the foot on a phone */ .tb-acts .ic[href="/messages"],.tb-acts .ic[href="/news"]{display:none} } /* ---- the foot of the house ---------------------------------------------- */ .foot{border-top:1px solid var(--hair); margin-top:48px; padding:46px 0 58px; text-align:center} .foot .wrap{padding-bottom:0} .f-names{font-family:var(--display); font-size:27px; color:var(--title); letter-spacing:-.01em; line-height:1.1} .f-names i{font-style:normal; color:var(--gold); font-size:.78em; padding:0 .14em} .f-when{font-size:14px; color:var(--note); margin-top:7px; letter-spacing:.01em} .f-rooms{display:flex; flex-wrap:wrap; justify-content:center; gap:7px 18px; margin:24px auto 0; max-width:760px} .f-rooms a{font-size:14px; color:var(--body); text-decoration:none} .f-rooms a:hover{color:var(--gold)} .f-note{font-size:13.5px; color:var(--note); margin:24px auto 0; max-width:54ch; line-height:1.55} @media (max-width:639px){ .foot{padding:36px 0 40px; margin-top:34px} body{padding-bottom:calc(66px + env(safe-area-inset-bottom))} } /* ---- the four days, in their own paintings -------------------------------- */ .days{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:0 0 28px} .day .cap{padding:14px 20px 18px} .day{ display:flex; flex-direction:column; text-decoration:none; color:inherit; min-width:0; background:var(--card); border-radius:var(--r); overflow:hidden; box-shadow:var(--lift); transition:transform .25s cubic-bezier(.2,.7,.3,1); } .day:hover{transform:translateY(-3px)} .day img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 62%; background:var(--sunk)} .day .cap{display:block; padding:14px 20px 18px; border-top:3px solid var(--e, var(--gold))} .day .n{display:block; font-family:var(--display); font-size:23px; color:var(--title); letter-spacing:-.01em; line-height:1.15} .day .s{display:block; font-size:14px; color:var(--body); margin-top:4px} .day .c{display:block; font-size:13px; color:var(--note); margin-top:6px; line-height:1.4} @media (max-width:760px){ .days{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px} .day img{aspect-ratio:5/4} .day .n{font-size:20px} .day .cap{padding:11px 13px 13px} } /* ---- the wedding website, as a window the guests look through ------------- */ .site{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); background:#17140F; color:#EFE7D6; border-radius:22px; overflow:hidden; box-shadow:var(--lift); margin:0 0 36px; } .site .shot{display:block; padding:28px 0 0 28px; text-decoration:none; color:inherit; align-self:end; min-width:0} .site .chrome{display:flex; align-items:center; gap:6px; background:#2A251C; border-radius:12px 12px 0 0; padding:10px 14px} /* both top corners, as a window has ("one edge is rounded and one is not") */ .site .chrome i{width:9px; height:9px; border-radius:50%; background:#5A5044; flex:none} .site .chrome i:nth-child(1){background:#C9694F} .site .chrome i:nth-child(2){background:#D9B368} .site .chrome i:nth-child(3){background:#6FA07A} .site .chrome .url{ margin-left:10px; flex:1; min-width:0; font-size:12px; color:#A89C86; background:#1F1B14; border-radius:6px; padding:4px 10px; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .site .shot img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; background:#000} .site .cap{padding:36px 36px 36px 32px; display:flex; flex-direction:column; justify-content:center; gap:12px; min-width:0} .site .cap .k{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#D9B368; font-weight:500} .site .cap h2{font-family:var(--display); font-weight:500; font-size:clamp(26px,3vw,34px); line-height:1.1; color:#FFFDF8; letter-spacing:-.015em} .site .cap p{color:#B7AC9A; font-size:15.5px; line-height:1.55; margin:0; max-width:40ch} .site .cap p em{font-style:normal; color:#EFE7D6} .site .nums{display:flex; gap:30px; margin:8px 0 2px; flex-wrap:wrap} .site .nums span{display:block} .site .nums b{display:block; font-size:34px; line-height:1; font-weight:500; letter-spacing:-.035em; color:#FFFDF8; font-variant-numeric:tabular-nums} .site .nums em{display:block; font-style:normal; font-size:13px; color:#A89C86; margin-top:5px} .site .acts{margin-top:8px; gap:8px} .site .btn,.site button{background:#2A251C; color:#EFE7D6; font-size:14.5px; height:40px; padding:0 var(--bx)} .site .btn:hover,.site button:hover{background:#3A3327} .site .btn.gold{background:var(--gold); color:#17140F} .site .btn.gold:hover{background:#C9993C} .site .linky{color:#D9B368; font-size:15px; margin-left:4px} @media (max-width:820px){ .site{grid-template-columns:1fr} .site .shot{padding:22px 22px 0} .site .chrome{border-radius:12px 12px 0 0} .site .cap{padding:24px 22px 28px} } /* ---- the rail, about people ------------------------------------------------ */ .gl-people{list-style:none; margin:0; padding:0; display:grid; gap:12px} .gl-people a{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; min-width:0} .gl-people a > span{min-width:0} .gl-people b{display:block; font-size:15px; color:var(--title); font-weight:500} .gl-people em{display:block; font-style:normal; font-size:12.5px; color:var(--note); margin-top:1px} .gl-h .new{color:var(--c-wine); font-weight:500; letter-spacing:0; text-transform:none; font-size:12px} /* a conversation: the face, then who it is with and when on one line, and the last words under it — "You:" in the note ink when they were yours */ .gl-msg{display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--body); margin:13px 0 0; line-height:1.35} .gl-msg .tx{flex:1; min-width:0} .gl-msg .who{display:flex; align-items:baseline; gap:10px} .gl-msg .who b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--title); font-weight:460; font-size:14.5px} .gl-msg .who em{margin-left:auto; flex:none; font-style:normal; font-size:12px; color:var(--note); white-space:nowrap} .gl-msg .last{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px} .gl-msg .last i{font-style:normal; color:var(--note)} .gl-msg.unread .last{color:var(--title)} .gl-msg .avatar{margin-top:1px} /* ---- messages -------------------------------------------------------------- */ .chatwrap{ display:grid; grid-template-columns:296px minmax(0,1fr); background:var(--card); border-radius:var(--r); box-shadow:var(--lift); overflow:hidden; min-height:min(72vh,720px); margin-bottom:12px; } .threads{border-right:1px solid var(--hair); display:flex; flex-direction:column; overflow:auto} .thread{display:flex; align-items:center; gap:12px; padding:14px 16px; text-decoration:none; color:inherit; border-top:1px solid var(--hair)} .thread:first-child{border-top:0} .thread:hover,.thread.on{background:var(--sunk)} .thread .tx{flex:1; min-width:0} .thread .tx b{display:block; font-size:15.5px; color:var(--title); font-weight:460} .thread .tx span{display:block; font-size:13.5px; color:var(--note); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px} .thread.unread .tx span{color:var(--title)} .thread em{font-style:normal; font-size:12px; color:var(--note); flex:none} .thread .dot{flex:none; font-style:normal; background:var(--c-wine); color:#fff; font-size:11px; font-weight:500; border-radius:980px; padding:3px 7px; min-width:22px; text-align:center} .chat{display:flex; flex-direction:column; min-width:0} .chat.empty{display:grid; place-items:center; padding:40px; text-align:center} .chat.empty .none{max-width:38ch} .chat-head{display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--hair)} .chat-head .tx{flex:1; min-width:0} .chat-head .tx b{display:block; font-size:16px; color:var(--title)} .chat-head .tx b a{text-decoration:none; color:inherit} .chat-head .tx > span{display:block; font-size:13px; color:var(--note)} .chat-head .back-sm{display:none; font-size:28px; line-height:1; color:var(--body); text-decoration:none; padding:0 6px 3px 0} .bubbles{flex:1; overflow:auto; padding:18px 18px 10px; display:flex; flex-direction:column; gap:8px; background:var(--paper)} .daysep{text-align:center; margin:10px 0 4px} .daysep span{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--note)} .bubble{max-width:min(74%,540px); background:var(--card); border-radius:18px; padding:10px 14px 7px; box-shadow:var(--lift); align-self:flex-start} .bubble.me{align-self:flex-end; background:var(--gold-soft)} .bubble p{margin:0; font-size:16px; line-height:1.45; color:var(--ink); overflow-wrap:anywhere} .bubble time{display:block; font-size:11px; color:var(--note); margin-top:4px; text-align:right} .bubble .pic{display:block; margin:-4px -8px 6px; border-radius:12px; overflow:hidden; background:var(--sunk)} .bubble .pic img{display:block; width:100%; max-height:380px; object-fit:cover} .bubbles .none.first{margin:auto; text-align:center; max-width:34ch} .chat .say{border-top:1px solid var(--hair); padding:12px 14px; background:var(--card)} .chat .say-row{display:flex; gap:10px; align-items:center} .chat .say-row input[name=body]{flex:1 1 0; min-width:0; border:0; background:var(--sunk); border-radius:980px; padding:12px 16px; font:inherit; font-size:16px; outline:none; color:var(--ink)} .chat .say .pick.file{padding:0 var(--bx); font-size:14px; flex:none} .chat .say button.gold{flex:none} .attached{display:flex; align-items:center; gap:12px; margin:0 0 10px; font-size:14px; color:var(--body)} .attached img{width:56px; height:56px; object-fit:cover; border-radius:10px; flex:none} .attached span{flex:1; min-width:0} @media (max-width:760px){ .chatwrap{grid-template-columns:1fr; min-height:0} .threads{border-right:0} .chatwrap.open .threads{display:none} .chatwrap:not(.open) .chat{display:none} .chat-head .back-sm{display:block} .bubbles{min-height:46vh; max-height:60vh} .chat .say .pick.file span{font-size:0} .chat .say .pick.file span::before{content:"+"; font-size:18px; line-height:1} } .sendto{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:16px} .sendto .btn{padding-left:6px} /* ---- one of the four days -------------------------------------------------- */ .hub{background:var(--card); border-radius:22px; overflow:hidden; box-shadow:var(--lift); margin:0 0 32px; border-top:5px solid var(--e, var(--gold))} .hub-scene img{display:block; width:100%; height:clamp(180px,26vw,300px); object-fit:cover; object-position:center 55%} .hub-body{display:flex; gap:28px; padding:0 30px 28px; align-items:flex-end; flex-wrap:wrap} .hub-card{flex:none; width:150px; margin-top:-72px; border-radius:12px; overflow:hidden; background:var(--sunk); box-shadow:0 0 0 5px var(--card), 0 12px 30px -14px rgba(40,32,20,.55)} .hub-card img{display:block; width:100%} .hub-facts{flex:1 1 380px; min-width:0; padding-top:18px} .hub-facts .line{display:block; font-family:var(--display); font-size:20px; color:var(--body); letter-spacing:-.005em} .facts{display:flex; flex-wrap:wrap; gap:14px 34px; margin:14px 0 18px} .facts span{display:block} .facts b{display:block; font-size:21px; font-weight:500; color:var(--title); letter-spacing:-.025em; line-height:1.1} .facts em{display:block; font-style:normal; font-size:13px; color:var(--note); margin-top:3px} @media (max-width:640px){ .hub-body{padding:0 20px 22px; gap:18px} .hub-card{width:104px; margin-top:-48px} .facts{gap:12px 24px} .facts b{font-size:18px} } /* ---- a person ---------------------------------------------------------------- */ .profile{background:var(--card); border-radius:22px; box-shadow:var(--lift); padding:30px; display:flex; gap:26px; align-items:center; flex-wrap:wrap; margin-bottom:30px} .profile .p-tx{flex:1 1 320px; min-width:0} .profile .k{display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:8px} .profile p{color:var(--body); font-size:15.5px} .profile .acts{margin-top:14px} .p-nums{display:flex; gap:28px; flex-wrap:wrap; flex:1 1 100%; border-top:1px solid var(--hair); padding-top:20px} .p-nums span{display:block} .p-nums b{display:block; font-size:30px; font-weight:500; letter-spacing:-.035em; color:var(--title); line-height:1; font-variant-numeric:tabular-nums} .p-nums em{display:block; font-style:normal; font-size:13px; color:var(--note); margin-top:5px} @media (max-width:640px){ .profile{padding:22px; gap:18px} .p-nums{gap:18px 22px} .p-nums b{font-size:26px} } /* ---- the calendar ---------------------------------------------------------- */ .views{display:flex; gap:14px 24px; align-items:flex-start; flex-wrap:wrap; margin-bottom:22px} .views .filters{margin-bottom:0} .cal{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:18px 18px 16px; margin-bottom:24px} .cal-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px} .cal-head h2{font-family:var(--display); font-weight:500; font-size:26px; letter-spacing:-.01em} .cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px} .cal .dow{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--note); padding:4px 6px 8px; font-weight:500} .cell{min-height:108px; border-radius:10px; background:var(--paper); padding:6px 6px 8px; display:flex; flex-direction:column; gap:4px; min-width:0} .cell.out{background:transparent} .cell.past:not(.today){opacity:.7} .cell .d{font-size:13px; color:var(--body); font-variant-numeric:tabular-nums; display:flex; gap:6px; align-items:baseline; padding:0 2px} .cell .d em{font-style:normal; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:500} .cell.today{box-shadow:inset 0 0 0 1.5px var(--gold)} .cell.today .d{color:var(--gold); font-weight:500} .cell[data-event]{background:color-mix(in srgb, var(--e, var(--gold)) 14%, #FFFFFF)} .cev{display:block; text-decoration:none; font-family:var(--display); font-size:15px; color:var(--e, var(--title)); line-height:1.15; padding:0 2px} .cev em{display:block; font-style:normal; font-family:var(--sans); font-size:11px; color:var(--note)} .cd{display:flex; gap:5px; align-items:flex-start; font-size:11.5px; line-height:1.3; color:var(--ink); padding:0 2px} .cd i{font-style:normal; color:var(--tone, var(--gold)); flex:none; width:12px; text-align:center} .ci{ display:flex; gap:5px; align-items:center; text-decoration:none; font-size:11.5px; line-height:1.25; color:var(--ink); border-left:3px solid var(--tone, var(--gold)); padding:2px 3px 2px 5px; border-radius:2px; min-width:0; } .ci span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0} .ci:hover{background:var(--sunk)} .ci.done{opacity:.5; text-decoration:line-through} .ci.late{color:var(--bad)} .ci .sw{width:6px; height:6px; border-radius:50%; background:var(--tone, var(--gold)); flex:none} .ci .avatar.xs{flex:none} .cell .more{font-size:11px; color:var(--gold); text-decoration:none; padding:0 4px} .legend{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:14px; align-items:center} .legend a{font-size:12.5px; color:var(--body); text-decoration:none; display:inline-flex; align-items:center; gap:6px} .legend a i{width:10px; height:10px; border-radius:3px; background:var(--tone, var(--gold))} .legend .lg-note{font-size:12px; color:var(--note); margin-left:auto} @media (max-width:700px){ .cal{padding:14px} .cal-grid{display:block} .cal .dow{display:none} .cell{min-height:0; margin-bottom:6px; padding:10px 12px; gap:6px} .cell:not(.has),.cell.out{display:none} .cell .d{font-size:14px; font-weight:500; color:var(--title)} .cell .d::before{content:attr(data-w) " "; color:var(--note); font-weight:400} .ci,.cd,.cev{font-size:14px} .ci span{white-space:normal} .legend .lg-note{margin-left:0; flex:1 1 100%} } /* ---- the timeline ------------------------------------------------------------ */ .gantt{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:18px 22px 20px; margin-bottom:24px} .g-head,.g-row{display:grid; grid-template-columns:190px minmax(0,1fr); gap:14px; align-items:center} .g-head{margin-bottom:4px} .g-head .g-track{height:22px} .g-month{position:absolute; top:0; height:100%; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--note); border-left:1px solid var(--hair); padding-left:6px; white-space:nowrap; overflow:hidden} .g-row{padding:8px 0; border-top:1px solid var(--hair)} .g-row.alldone{opacity:.5} .g-lab{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--title); font-size:14.5px; font-weight:460; min-width:0} .g-lab i{width:10px; height:10px; border-radius:3px; background:var(--tone, var(--gold)); flex:none} .g-lab em{font-style:normal; font-size:12px; color:var(--note); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-left:auto; padding-left:8px} .g-track{position:relative; height:26px} .g-wed{position:absolute; top:-8px; bottom:-8px; background:color-mix(in srgb, var(--c-rose) 12%, transparent)} .g-bar{position:absolute; top:9px; height:8px; border-radius:8px; background:color-mix(in srgb, var(--tone, var(--gold)) 28%, #FFFFFF)} .g-dot{ position:absolute; top:6px; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:#FFFFFF; box-shadow:inset 0 0 0 2.5px var(--tone, var(--gold)); transition:transform .15s; } .g-dot:hover{transform:scale(1.4); z-index:2} .g-dot.done{background:var(--tone, var(--gold))} .g-dot.late{box-shadow:inset 0 0 0 2.5px var(--bad); background:var(--bad)} .g-today{position:absolute; top:-8px; bottom:-8px; width:1.5px; background:var(--gold); opacity:.8} .g-head .g-today{display:none} @media (max-width:700px){ .gantt{padding:14px} .g-head,.g-row{grid-template-columns:104px minmax(0,1fr); gap:10px} .g-lab{font-size:13px} .g-lab em{display:none} } /* ---- the linked album: what is in it, and bringing it in ------------------- */ .linked{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:18px 20px 16px; margin-bottom:26px} .linked > .note{margin-bottom:14px} .photos.remote{--row:150px; gap:5px; max-height:min(64vh,640px); overflow:auto; padding:3px; border-radius:12px} .photos.remote label,.photos.remote .here{border-radius:10px; cursor:pointer} .photos.remote img{width:100%; height:100%; object-fit:cover; display:block} .photos.remote input{position:absolute; opacity:0; width:1px; height:1px} .photos.remote label i{position:absolute; top:7px; right:7px; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.85); box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25)} .photos.remote label:has(input:checked){box-shadow:inset 0 0 0 3px var(--gold)} .photos.remote label:has(input:checked) i{background:var(--gold); box-shadow:none} .photos.remote label:has(input:checked) i::after{content:"✓"; color:#fff; font-size:13px; font-weight:500; position:absolute; inset:0; display:grid; place-items:center} .photos.remote .here{opacity:.5; cursor:default} .photos.remote .here i{position:absolute; top:7px; right:7px; width:22px; height:22px; border-radius:50%; background:var(--title); color:#fff; font-style:normal; font-size:12px; display:grid; place-items:center} .linked-acts{margin-top:14px} /* ---- several people on one vendor card -------------------------------------- */ .crows{display:grid; gap:8px} .crow{display:grid; grid-template-columns:1.1fr 1fr 1.4fr; gap:8px} .crow input{width:100%; font:inherit; border:0; border-radius:10px; padding:11px var(--bx); background:var(--sunk); color:var(--ink)} .contacts button{margin-top:10px} .list .row.contact .r.acts{display:flex; gap:8px} .list .row.contact .btn{height:36px; padding:0 14px; font-size:14px} .percard .ph span{display:block} @media (max-width:640px){ .crow{grid-template-columns:1fr 1fr} .crow input:last-child{grid-column:1 / -1} .list .row.contact{flex-wrap:wrap} .list .row.contact .r.acts{margin-left:0; flex:1 1 100%} } /* ---- search -------------------------------------------------------------------- */ .search.big input{font-size:18px; padding:16px var(--bx)} .list .row .thumb{width:44px; height:44px; object-fit:cover; border-radius:8px; flex:none} /* ===================================================================== ROUND 4: a bar of tools with the two clocks, and four new rooms. ===================================================================== */ /* ---- the brand: the house's mark and its names, side by side ------------- */ .brand{display:flex; align-items:center; gap:12px} /* ---- the bar: tools, a Rooms menu, and both clocks ------------------------ */ .roomsmenu{position:relative; margin-left:6px} .roomsmenu > summary{ list-style:none; cursor:pointer; font-size:15px; font-weight:500; color:var(--body); padding:8px 14px; border-radius:980px; display:flex; align-items:center; gap:8px; white-space:nowrap; } .roomsmenu > summary::-webkit-details-marker{display:none} .roomsmenu > summary::after{content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-1px,-2px)} .roomsmenu > summary:hover,.roomsmenu[open] > summary{background:var(--sunk); color:var(--title)} .roomsmenu .menu{ position:absolute; top:calc(100% + 10px); left:0; z-index:50; background:var(--card); border-radius:18px; box-shadow:0 1px 1px rgba(40,32,20,.05), 0 26px 54px -22px rgba(40,32,20,.5); padding:10px; display:grid; grid-template-columns:repeat(3, 156px); gap:2px; } .roomsmenu .menu a{display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:11px; text-decoration:none; color:var(--title); font-size:14.5px} .roomsmenu .menu a:hover{background:var(--sunk)} .roomsmenu .menu a[aria-current=page]{background:var(--sunk); font-weight:500} .roomsmenu .menu i{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none; font-style:normal; font-size:15px; line-height:1; color:var(--c, var(--title)); background:color-mix(in srgb, var(--c, var(--title)) 14%, #FFFFFF); } .tb-clocks{display:flex; gap:18px; margin-left:auto; text-decoration:none; color:inherit; padding:5px 12px; border-radius:12px} .tb-clocks:hover{background:var(--sunk)} .tb-clocks span{display:flex; flex-direction:column; align-items:flex-start; line-height:1.1} .tb-clocks b{font-size:15.5px; font-weight:500; color:var(--title); font-variant-numeric:tabular-nums; letter-spacing:-.01em; white-space:nowrap} .tb-clocks b.night{color:var(--note)} .tb-clocks b.night::before{content:"☾ "; font-size:11px; font-weight:400} .tb-clocks em{font-style:normal; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--note); margin-top:3px} .tb-acts{margin-left:6px} @media (max-width:900px){ .roomsmenu{display:none} .tb-clocks{gap:12px; padding:3px 8px} .tb-clocks b{font-size:13.5px} .tb-clocks em{font-size:9.5px; letter-spacing:.1em} } @media (max-width:420px){ .tb-clocks em{display:none} .tb-clocks{gap:10px} .tb{gap:8px} } /* the dock holds every room now: a grid, two rows on a desktop */ @media (min-width:681px){ .dock{display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:18px 6px; overflow:visible; padding:4px 0 8px} .door{width:auto} } @media (min-width:681px) and (max-width:899px){ .dock{grid-template-columns:repeat(5, minmax(0,1fr))} } :root{--c-sky:#4C82A8; --c-terracotta:#B5573B} .door[href="/updates"],.menu a[data-door="/updates"]{--c:var(--c-terracotta)} .door[href="/meet"],.menu a[data-door="/meet"]{--c:var(--c-teal)} .door[href="/sangeet"],.menu a[data-door="/sangeet"]{--c:var(--c-red)} .door[href="/map"],.menu a[data-door="/map"]{--c:var(--c-sky)} .door[href="/messages"],.menu a[data-door="/messages"]{--c:var(--c-plum)} .menu a[data-door="/news"]{--c:var(--c-wine)} .menu a[data-door="/photos"]{--c:var(--c-rose)} .menu a[data-door="/invites"]{--c:var(--c-marigold)} .menu a[data-door="/plan"]{--c:var(--c-leaf)} .menu a[data-door="/money"]{--c:var(--c-gold)} .menu a[data-door="/documents"]{--c:var(--c-peach)} .menu a[data-door="/guests"]{--c:var(--c-teal)} .menu a[data-door="/people"]{--c:var(--c-slate)} .menu a[data-door="/notes"]{--c:var(--c-plum)} .menu a[data-door="/story"]{--c:var(--c-red)} .menu a[data-door="/"]{--c:var(--c-gold)} .wrap[data-room="/updates"]{--c:var(--c-terracotta)} .wrap[data-room="/meet"]{--c:var(--c-teal)} .wrap[data-room="/sangeet"]{--c:var(--c-red)} .wrap[data-room="/map"]{--c:var(--c-sky)} .wrap[data-room="/messages"]{--c:var(--c-plum)} .wrap[data-room="/who"],.wrap[data-room="/me"]{--c:var(--c-slate)} /* ---- the wash: the house's own card, blurred, at the top of every page ---- */ html::before{ left:-6vw; right:-6vw; top:-8vh; bottom:auto; width:auto; height:78vh; aspect-ratio:auto; opacity:.16; background:var(--wash, none) center top/cover no-repeat; /* the house's own card, blurred (its dress) */ filter:blur(26px) saturate(1.05); -webkit-mask:linear-gradient(to bottom, #000 0%, #000 22%, transparent 100%); mask:linear-gradient(to bottom, #000 0%, #000 22%, transparent 100%); } @media (max-width:720px){ html::before{height:60vh; opacity:.14} } /* the album caption is a span holding blocks: it must be a block itself, or its padding attaches to an empty fragment and the words sit on the edge */ .album .cap{display:block} /* ---- from the two of us --------------------------------------------------- */ .stand{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:20px 24px 22px; margin-bottom:24px} .stand-row{display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:4px} .stand-row span{display:block} .stand-row b{display:block; font-size:30px; font-weight:500; letter-spacing:-.035em; color:var(--title); line-height:1; font-variant-numeric:tabular-nums} .stand-row em{display:block; font-style:normal; font-size:13px; color:var(--note); margin-top:5px} .stand .note{margin-top:14px} .update{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:22px 26px 24px; margin-bottom:18px} .update .head{display:flex; align-items:center; gap:12px; margin-bottom:14px} .update .head .tx{flex:1; min-width:0} .update .head b{display:block; font-size:15.5px; color:var(--title); font-weight:500} .update .head em{display:block; font-style:normal; font-size:13.5px; color:var(--note)} .update h2{font-family:var(--display); font-weight:500; font-size:clamp(24px,3vw,32px); letter-spacing:-.015em; line-height:1.12; margin-bottom:12px} .update .body{font-size:17.5px; line-height:1.65; color:var(--ink); max-width:66ch} .update .body p{margin:0 0 14px} .update .body p:last-child{margin:0} .update .body h3{font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--note); margin:22px 0 8px} .update .pics{display:grid; gap:4px; margin-top:18px; border-radius:12px; overflow:hidden} .update .pics.n1{grid-template-columns:1fr} .update .pics.n2,.update .pics.n3,.update .pics.n4{grid-template-columns:1fr 1fr} .update .pics img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--sunk)} .update .pics.n1 img{aspect-ratio:auto; max-height:560px} .latest-update{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; margin:0 0 18px; background:color-mix(in srgb, var(--c-terracotta) 9%, #FFFFFF); border-radius:var(--r); padding:16px 20px; } .latest-update .tx{flex:1; min-width:0} .latest-update .k{display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-terracotta); font-weight:500} .latest-update b{display:block; font-family:var(--display); font-weight:500; font-size:21px; color:var(--title); margin-top:3px; line-height:1.2} .latest-update em{display:block; font-style:normal; font-size:14.5px; color:var(--body); margin-top:4px} .latest-update .arrow{color:var(--c-terracotta); font-size:20px} @media (max-width:640px){ .update{padding:18px 18px 20px} .stand-row{gap:12px 22px} .stand-row b{font-size:26px} } /* ---- where everyone is ------------------------------------------------------ */ .map{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:14px 14px 10px; margin-bottom:28px} .map svg{display:block; width:100%; height:auto; border-radius:12px; background:#E6EEF0} .map .land{fill:#E9DFC8; stroke:#D4C4A0; stroke-width:.5; stroke-linejoin:round} .map .night{fill:rgba(28,25,23,.3); pointer-events:none} .map .pin{cursor:pointer} .map .pin .ring{fill:#FFFFFF; stroke:var(--gold); stroke-width:1.5; transition:stroke-width .15s} .map .pin.hot .ring{stroke-width:3.5} .map .pin .init{fill:color-mix(in srgb, var(--tone, var(--gold)) 24%, #FFFFFF)} .map .pin .ini{font:500 10px var(--sans); fill:var(--title); text-anchor:middle; pointer-events:none} .map .pin .lbl{font:500 9.5px var(--sans); fill:var(--title); text-anchor:middle; paint-order:stroke; stroke:#FFFFFF; stroke-width:3px; stroke-linejoin:round; pointer-events:none} .map .pin.venue circle{fill:var(--c-rose); stroke:#FFFFFF; stroke-width:1.2} .map .pin.venue text{font:500 8.5px var(--sans); fill:var(--c-rose); text-anchor:middle; paint-order:stroke; stroke:#FFFFFF; stroke-width:3px} .map-cards{display:flex; flex-wrap:wrap; gap:6px 14px; padding:12px 4px 4px} .mcard{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; padding:6px 12px 6px 6px; border-radius:980px; min-width:0} .mcard:hover,.mcard.hot{background:var(--sunk)} .mcard b{display:block; font-size:14.5px; color:var(--title); font-weight:460} .mcard em{display:block; font-style:normal; font-size:12.5px; color:var(--note)} .mcard .t.night::before{content:"☾ "} .talk{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:18px 20px 16px; margin-bottom:20px; overflow-x:auto} .talk .trow{display:grid; grid-template-columns:124px repeat(24, minmax(0,1fr)); gap:2px; align-items:center; margin-bottom:6px} .talk .tlab{font-size:13.5px; color:var(--title); font-weight:460; padding-right:12px; min-width:0} .talk .tlab em{display:block; font-style:normal; font-size:11.5px; color:var(--note); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .talk .hr{height:36px; border-radius:6px; background:var(--sunk); display:grid; place-items:center; font-size:10.5px; color:var(--body); font-variant-numeric:tabular-nums} .talk .hr.sleep{background:#F8F5EF; color:#CDC3B3} .talk .hr.now{box-shadow:inset 0 0 0 2px var(--gold); color:var(--title); font-weight:500} .talk .trow.sum .hr{height:9px; background:transparent} .talk .trow.sum .hr.good{background:var(--gold)} .talk .trow.head .hr{background:transparent; height:18px; font-size:10px; color:var(--note)} @media (max-width:760px){ .talk .trow{grid-template-columns:90px repeat(24, 28px)} .talk .hr{font-size:9.5px; height:30px} .talk .tlab{font-size:12.5px} } /* ---- let's meet ---------------------------------------------------------------- */ .meeting{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:20px 22px 14px; margin-bottom:18px} .meeting .head{display:flex; align-items:center; gap:12px; margin-bottom:10px} .meeting .head .tx{flex:1; min-width:0} .meeting .head b{display:block; font-size:19px; color:var(--title); letter-spacing:-.018em; font-weight:500} .meeting .head em{display:block; font-style:normal; font-size:14px; color:var(--note); margin-top:2px} .meeting .pill{font-size:12.5px; color:var(--note); background:var(--sunk); border-radius:980px; padding:5px 11px; white-space:nowrap; flex:none} .meeting .pill.on{background:color-mix(in srgb, var(--c-leaf) 16%, #FFFFFF); color:var(--c-leaf)} .meeting .say{padding:0; margin:0 0 12px; font-size:16px} .opts{display:grid; gap:4px} .opt{display:grid; grid-template-columns:34px minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:10px 10px; border-radius:12px; background:var(--paper)} .opt.chosen{background:color-mix(in srgb, var(--c-leaf) 12%, #FFFFFF)} .opt.dim{opacity:.55} .tick-me{position:relative; display:grid; place-items:center; cursor:pointer} .tick-me input{position:absolute; opacity:0; width:1px; height:1px} .tick-me i{width:26px; height:26px; border-radius:50%; box-shadow:inset 0 0 0 1.6px #D5CBBA; display:grid; place-items:center; font-style:normal; font-size:14px; color:#FFFFFF; background:transparent} .tick-me input:checked + i{background:var(--gold); box-shadow:none} .tick-me input:checked + i::after{content:"✓"; font-weight:500} .tick-me input:focus-visible + i{outline:2px solid var(--gold); outline-offset:2px} .tick-me.yes i{background:var(--c-leaf); box-shadow:none} .opt .when b{display:block; font-size:15.5px; color:var(--title); font-weight:460} .opt .when em{display:block; font-style:normal; font-size:13px; color:var(--note)} .opt .who{display:flex; align-items:center} .opt .who .avatar.xs{margin-right:-6px; box-shadow:0 0 0 2px var(--card)} .opt .who em{font-style:normal; font-size:12.5px; color:var(--note); margin-left:12px; white-space:nowrap} .opt .confirm{font-size:13.5px} .opts .acts{margin-top:10px} .meeting .foot{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; padding-top:10px; border-top:1px solid var(--hair); font-size:14px} .optrows .crow{grid-template-columns:1fr 1fr} @media (max-width:640px){ .opt{grid-template-columns:34px minmax(0,1fr)} .opt .who,.opt .confirm{grid-column:2; justify-self:start} .meeting{padding:16px 16px 12px} } /* ---- the sangeet ---------------------------------------------------------------- */ .task.act{text-decoration:none; color:inherit} .task.act .num{width:28px; height:28px; border-radius:50%; background:var(--sunk); display:grid; place-items:center; font-size:13px; font-weight:500; color:var(--body); flex:none} .task.act .what{display:block} .status{font-size:12.5px; color:var(--body); background:var(--sunk); border-radius:980px; padding:4px 10px; white-space:nowrap} .status[data-status="Ready"]{background:color-mix(in srgb, var(--c-leaf) 16%, #FFFFFF); color:var(--c-leaf)} .status[data-status="Rehearsing"]{background:color-mix(in srgb, var(--c-marigold) 20%, #FFFFFF); color:#7A5A0F} .status[data-status="Being choreographed"]{background:color-mix(in srgb, var(--c-peach) 18%, #FFFFFF); color:var(--c-peach)} .row.rehearsal{align-items:center; gap:16px} .row.rehearsal .dt{flex:0 0 200px} .row.rehearsal .dt b{display:block; font-size:15px; color:var(--title); font-weight:460} .row.rehearsal .dt em{display:block; font-style:normal; font-size:13px; color:var(--note)} .row.rehearsal .tx{flex:1; min-width:0} .row.rehearsal .tx b{display:block; font-size:15.5px; color:var(--title); font-weight:460} .row.rehearsal .tx > em{display:block; font-style:normal; font-size:13px; color:var(--note)} .row.rehearsal .faces{display:flex; align-items:center; margin-top:6px} .row.rehearsal .faces .avatar.xs{margin-right:-5px; box-shadow:0 0 0 2px var(--card)} .row.rehearsal .faces em{font-style:normal; font-size:12.5px; color:var(--note); margin-left:11px} .coming{display:flex; gap:6px; flex:none} .coming button{height:36px; font-size:13.5px; padding:0 14px} .coming button.on{color:var(--title); background:var(--sunk)} .clips{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px} .clip{display:block; text-decoration:none; color:inherit; background:var(--card); border-radius:12px; overflow:hidden; box-shadow:var(--lift)} .clip video,.clip img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#100D08} .clip > span{display:block; padding:8px 10px; font-size:13px; color:var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} @media (max-width:640px){ .row.rehearsal{flex-wrap:wrap} .row.rehearsal .dt{flex:1 1 100%} .coming{margin-left:auto} } /* ===================================================================== ROUND 5: one button system (above), the head of the house with the clocks beside the names, posts laid out as a social post with reactions of every kind, the two families, a real map, a better Let's meet, and albums with their own pick and settings pages. ===================================================================== */ /* how the day is going lives in the rail now */ .moodcard .seg3{display:flex; gap:6px; margin:2px 0 10px} .moodcard .seg3 button{flex:1 1 0; padding:0 8px} .moodcard .gl-sub b{color:var(--title); font-weight:460; text-transform:capitalize} .moodcard .gl-sub .t{color:var(--note); font-variant-numeric:tabular-nums} .moodcard .gl-sub .t.night::before{content:"☾ "} /* ---- from the two of us: their letters as the door, and a card at home ---- */ .pair{display:inline-flex; flex:none} .pair img{width:46px; height:46px; border-radius:50%; object-fit:cover; display:block; background:var(--sunk); box-shadow:0 0 0 2.5px var(--card)} .pair img + img{margin-left:-14px} .fromus{ display:flex; align-items:center; gap:18px; text-decoration:none; color:inherit; margin:0 0 30px; background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:18px 20px; } .fromus .tx{flex:1; min-width:0} .fromus .k{display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-terracotta); font-weight:500; margin-bottom:3px} .fromus b{display:block; font-family:var(--display); font-weight:500; font-size:22px; color:var(--title); line-height:1.2} .fromus em{display:block; font-style:normal; font-size:15px; color:var(--body); margin-top:4px; line-height:1.45; max-width:66ch} .fromus .by{display:block; font-size:13px; color:var(--note); margin-top:6px} .fromus .arrow{color:var(--c-terracotta); font-size:15px; white-space:nowrap; font-weight:460} .fromus:hover{box-shadow:0 1px 1px rgba(40,32,20,.03), 0 14px 34px -18px rgba(40,32,20,.4)} @media (max-width:640px){ .fromus{padding:16px; gap:14px} .fromus .arrow{display:none} .fromus b{font-size:19px} } .pagehead{display:flex; align-items:center; gap:18px; margin:0 0 26px} .pagehead .roomtitle{margin-bottom:6px} /* ---- a post, laid out the way a social post is --------------------------- */ .post .head{padding:18px 20px 0; align-items:center} .post .head .tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px} .post .head .nm{font-weight:500; color:var(--title); font-size:16px; line-height:1.2} .post .head .tm{font-size:13.5px; color:var(--note)} .post .head .tm b{color:var(--body); font-weight:460} .post .head .tm .aud{color:var(--gold)} .post .head .tm .due{font-variant-numeric:tabular-nums} .post .say{padding:12px 20px 0} .post .pics{margin-top:14px} .post .sum{display:flex; align-items:center; gap:12px; padding:12px 20px 0; font-size:13.5px; color:var(--note); min-height:0} .post .sum .rx,.sum .rx{display:inline-flex; align-items:center; gap:6px} .sum .marks{display:inline-flex} .sum .marks i{ font-style:normal; font-size:12px; width:20px; height:20px; border-radius:50%; background:var(--card); display:inline-grid; place-items:center; box-shadow:0 0 0 1.5px var(--card), 0 1px 3px rgba(0,0,0,.18); } .sum .marks i + i{margin-left:-6px} .post .sum .rp{margin-left:auto; color:var(--note); text-decoration:none} .post .sum .rp:hover{color:var(--title); text-decoration:underline} .post .actions{display:flex; margin:12px 12px 0; border-top:1px solid var(--hair); padding-top:4px} .actions .act,.actions .react .act{ flex:1 1 0; height:40px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:14.5px; font-weight:460; color:var(--body); text-decoration:none; border-radius:10px; background:transparent; padding:0 8px; } .actions .act svg{width:19px; height:19px} .actions .act:hover{background:var(--sunk); color:var(--title)} .actions .react{flex:1 1 0; display:flex; position:relative} .actions .react .act{width:100%} .actions .react.on .act,.react.on .act{color:var(--gold)} .actions .react .act[aria-pressed=true],.react .act[aria-pressed=true]{background:transparent; color:var(--gold)} .react .act .mk{font-style:normal; font-size:17px; line-height:1} .react .more{ position:absolute; right:2px; top:6px; height:28px; width:28px; padding:0; border-radius:50%; background:transparent; color:var(--note); font-size:14px; letter-spacing:.02em; display:none; } .react .panel{ position:absolute; left:0; bottom:calc(100% + 6px); z-index:5; display:none; gap:2px; padding:5px; background:var(--card); border-radius:980px; box-shadow:0 1px 1px rgba(40,32,20,.06), 0 14px 34px -14px rgba(40,32,20,.5); } .react .panel button{width:40px; height:40px; padding:0; border-radius:50%; background:transparent; font-size:22px; line-height:1; transition:transform .12s} .react .panel button:hover{transform:scale(1.25) translateY(-2px); background:transparent} .react .panel button[aria-pressed=true]{background:var(--gold-soft)} @media (hover:hover){ .react:hover .panel,.react:focus-within .panel{display:flex} } .react.open .panel{display:flex} @media (hover:none){ .react .more{display:grid; place-items:center} .react .act{padding-right:30px} } .actions.loose{margin:14px 0 0; border-top:0; padding-top:0; gap:6px; flex-wrap:wrap} .actions.loose .act,.actions.loose .react{flex:0 0 auto} .actions.loose .act{padding:0 var(--bx); background:var(--sunk); height:36px; border-radius:980px} .actions.loose .react .act{width:auto} /* replies as bubbles */ .post .replies{border-top:1px solid var(--hair); padding:14px 20px 4px; margin-top:12px; display:flex; flex-direction:column; gap:10px} .post .reply{display:flex; gap:10px; align-items:flex-start} .reply .bub{display:inline-flex; flex-direction:column; gap:1px; background:var(--sunk); border-radius:16px; padding:8px 14px 8px; max-width:min(100%, 60ch); min-width:0} .reply .bub .nm{font-weight:500; color:var(--title); font-size:14.5px; line-height:1.25} .reply .bub .bod{font-size:15.5px; color:var(--ink); line-height:1.4} .reply .bub em{font-style:normal; font-size:12px; color:var(--note); margin-top:3px} .reply .bub .shots{margin-top:8px} .post .replies .earlier{font-size:13.5px; color:var(--body); text-decoration:none; padding-left:44px} .post .replies .earlier:hover{color:var(--title); text-decoration:underline} .post .replybox,.post.replybox{padding:10px 18px 14px; border-top:0} .post .replies + .replybox{padding-top:6px} .post .replybox input,.post.replybox input{height:40px; padding:0 16px} .post .replybox .ico,.post.replybox .ico{width:40px; height:40px} /* ---- the rooms menu grid now has fifteen doors ----------------------------- */ .roomsmenu .menu{grid-template-columns:repeat(3, 168px)} /* ---- the login page: names by side ----------------------------------------- */ .who-group{margin-bottom:16px} .who-k{display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--note); font-weight:500; margin-bottom:8px} .who-list{margin-bottom:0} .whoname span i{font-style:normal; color:var(--note); font-weight:400; font-size:13px; margin-left:4px} .whoname input:checked + span i{color:#D9CFC0} form.login .code{margin-top:22px} /* ---- the two families ------------------------------------------------------- */ .sides{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; margin-bottom:26px} .side{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:20px 20px 22px} .side-head{display:flex; align-items:center; gap:12px; margin-bottom:14px} .side-head b{display:block; font-family:var(--display); font-weight:500; font-size:24px; color:var(--title); letter-spacing:-.01em; line-height:1.1} .side-head em{display:block; font-style:normal; font-size:13.5px; color:var(--note); margin-top:2px} .circle{margin-bottom:14px} .circle-k{display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--note); font-weight:500; margin:0 0 6px; padding-top:10px; border-top:1px solid var(--hair)} .circle-k i{font-style:normal; text-transform:none; letter-spacing:0; font-weight:400; color:var(--note)} .circle .none{display:block; font-size:14px; padding:6px 0 4px} .member{display:flex; align-items:center; gap:12px; padding:8px 6px 8px 0; text-decoration:none; color:inherit; border-radius:12px} .member:hover{background:var(--sunk); padding-left:6px} .member .tx{flex:1; min-width:0} .member .tx b{display:block; font-size:15.5px; color:var(--title); font-weight:460} .member .tx em{display:block; font-style:normal; font-size:13px; color:var(--note); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .member .go{color:var(--note); display:grid; place-items:center} .member .go svg{width:18px; height:18px} .member .go.you{font-size:12px; color:var(--note)} .side > .btn{margin-top:8px} @media (max-width:760px){ .sides{grid-template-columns:1fr} } .facepick{display:flex; align-items:center; gap:18px} .facepick .avatar.big{width:88px; height:88px; font-size:28px} .keys .gl-h{margin-bottom:6px} .keys .link-line{margin-top:10px} /* ---- albums: what is in it; picking and settings are their own pages ------- */ .outlink.row{display:flex; align-items:center; gap:14px; padding:12px 16px 12px 12px; margin-bottom:18px} .outlink.row .thumb{width:64px; height:64px; aspect-ratio:1; border-radius:10px; object-fit:cover; flex:none} .outlink.row .cap{padding:0; flex:1; min-width:0} .album-foot{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:22px; padding-top:18px; border-top:1px solid var(--hair)} .linked{padding:14px 16px 16px} /* ---- let's meet ------------------------------------------------------------- */ .meeting{padding:0; overflow:hidden} .mhead{display:flex; align-items:center; gap:14px; padding:16px 18px 14px} .datebox{flex:none; width:54px; text-align:center; background:var(--sunk); border-radius:12px; padding:7px 0 8px} .datebox b{display:block; font-size:24px; line-height:1; font-weight:500; letter-spacing:-.03em; color:var(--title); font-variant-numeric:tabular-nums} .datebox em{display:block; font-style:normal; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-teal); margin-top:3px; font-weight:500} .meeting.on .datebox{background:color-mix(in srgb, var(--c-leaf) 14%, #FFFFFF)} .meeting.on .datebox em{color:var(--c-leaf)} .mhead .tx{flex:1; min-width:0} .mhead .tx b{display:block; font-size:19px; color:var(--title); letter-spacing:-.018em; font-weight:500; line-height:1.2} .mhead .tx em{display:block; font-style:normal; font-size:14px; color:var(--note); margin-top:3px} .mbody{padding:0 18px 14px} .mbody.with-map{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px} .mleft{min-width:0} .mplace{display:flex; flex-direction:column; gap:10px} .mplace iframe{width:100%; height:220px; border:0; border-radius:12px; background:var(--sunk); display:block} .mplace .btn svg{width:16px; height:16px} .mplace.call{background:var(--sunk); border-radius:12px; padding:16px; align-items:flex-start; gap:2px; align-self:start} .mplace.call .k{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--note); font-weight:500; margin-bottom:8px} .mplace.call .t.big{font-size:24px; font-weight:500; color:var(--title); font-variant-numeric:tabular-nums; letter-spacing:-.03em; line-height:1} .mplace.call em{font-style:normal; font-size:12.5px; color:var(--note); margin:0 0 12px} .meeting .opts{gap:6px} .opt{background:var(--paper); padding:10px 12px 10px var(--bx)} .opt .confirm{justify-self:end} .meeting .foot{margin:0; padding:12px 18px 14px; border-top:1px solid var(--hair); background:var(--paper)} @media (max-width:760px){ .mbody.with-map{grid-template-columns:1fr} .mplace iframe{height:180px} } /* the form */ .faces-pick{display:flex; flex-wrap:wrap; gap:8px} .facename{display:inline-flex; align-items:center; gap:8px; cursor:pointer; padding:5px 14px 5px 5px; border-radius:980px; background:var(--sunk); font-size:14.5px; font-weight:460; color:var(--title)} .facename input{position:absolute; opacity:0; width:1px; height:1px} .facename:has(input:checked){background:var(--title); color:#FFFDF9} .facename:has(input:checked) .avatar{box-shadow:0 0 0 2px #FFFDF9} .facename:has(input:focus-visible){outline:2px solid var(--gold); outline-offset:2px} .facename .avatar.sm{width:28px; height:28px; font-size:11px} .seg2{display:inline-flex; background:var(--sunk); border-radius:980px; padding:3px} .seg2 label{cursor:pointer} .seg2 input{position:absolute; opacity:0; width:1px; height:1px} .seg2 span{display:inline-flex; align-items:center; height:32px; padding:0 calc(var(--bx) - 3px); border-radius:980px; font-size:14.5px; font-weight:460; color:var(--body)} .seg2 input:checked + span{background:var(--card); color:var(--title); box-shadow:0 1px 3px rgba(40,32,20,.12)} .timepick{display:flex; gap:8px; flex-wrap:wrap; align-items:center} .timepick select{width:auto; flex:1 1 150px; height:44px; padding:0 14px} .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px} .chips:empty{display:none} .chip{display:inline-flex; align-items:center; gap:10px; background:var(--card); box-shadow:var(--lift); border-radius:12px; padding:8px 8px 8px var(--bx); font-size:14px; color:var(--title)} .chip em{font-style:normal; color:var(--note); font-size:13px} .chip button{width:26px; height:26px; padding:0; border-radius:50%; background:var(--sunk); font-size:14px; color:var(--body)} .chip button:hover{color:var(--bad)} form.stack .note{margin-top:0} form.stack input[type=date],form.stack input[type=datetime-local],form.stack input[type=time]{color:var(--ink)} input[type=date]::-webkit-datetime-edit,input[type=datetime-local]::-webkit-datetime-edit,input[type=time]::-webkit-datetime-edit{color:var(--ink)} form.stack select{height:48px; appearance:none; -webkit-appearance:none; padding-right:40px; background-image:linear-gradient(45deg, transparent 50%, var(--note) 50%), linear-gradient(135deg, var(--note) 50%, transparent 50%); background-position:calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat} /* ---- the map ---------------------------------------------------------------- */ .map{padding:10px 10px 8px} .map svg{background:#DCE7EE; border-radius:14px} .map .grat{fill:none; stroke:#FFFFFF; stroke-width:.35; opacity:.55} .map .land{fill:#F1EADB; stroke:#B9AB8C; stroke-width:.35; stroke-linejoin:round} .map .lake{fill:#DCE7EE; stroke:#B9AB8C; stroke-width:.25} .map .border{fill:none; stroke:#C7B99A; stroke-width:.35; stroke-dasharray:1.2 1} .map .night{fill:#1E2436; opacity:.22; pointer-events:none} .map .sundot{fill:#F3C64B; stroke:#FFFFFF; stroke-width:.8} .map .arc{fill:none; stroke:var(--gold); stroke-width:1.1; stroke-dasharray:3 2.2; opacity:.85} .map .arclab{font:500 9.5px var(--sans); fill:var(--gold); text-anchor:middle; paint-order:stroke; stroke:#F1EADB; stroke-width:3px; stroke-linejoin:round} .map .face{cursor:pointer} .map .face .ring{fill:#FFFFFF; stroke:var(--gold); stroke-width:1.2; transition:stroke-width .15s} .map .face.hot .ring{stroke-width:3} .map .face .init{fill:color-mix(in srgb, var(--tone, var(--gold)) 24%, #FFFFFF)} .map .face .ini{font:500 9.5px var(--sans); fill:var(--title); text-anchor:middle; pointer-events:none} .map .cluster .lbl{font:500 10.5px var(--sans); fill:var(--title); text-anchor:middle; paint-order:stroke; stroke:#FFFFFF; stroke-width:3.5px; stroke-linejoin:round; pointer-events:none} .map .cluster .lbl .tm{fill:var(--body); font-weight:500} .map .cluster .names{font:500 8.5px var(--sans); fill:var(--body); text-anchor:middle; paint-order:stroke; stroke:#FFFFFF; stroke-width:3px; stroke-linejoin:round; pointer-events:none} .map .pin.venue circle{fill:var(--c-rose); stroke:#FFFFFF; stroke-width:1} .map .pin.venue .dot{fill:#FFFFFF; stroke:none} .map .pin.venue text{font:500 8.5px var(--sans); fill:var(--c-rose); text-anchor:middle; paint-order:stroke; stroke:#FFFFFF; stroke-width:3px} .mcard em i{font-style:normal} /* when can we talk: sentences first, the strip under them */ .talk{padding:20px 22px 18px} .talk .now{font-size:17px; color:var(--title); line-height:1.5; margin:0 0 8px; max-width:66ch} .talk .now::before{display:none} .talk .now b{font-weight:500} .talk .win{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:8px} .talk .win li{display:flex; align-items:baseline; gap:12px; font-size:15.5px; color:var(--ink); flex-wrap:wrap} .talk .win li i{flex:none; width:10px; height:10px; border-radius:50%; background:var(--gold); align-self:center} .talk .win li b{font-weight:500; color:var(--title)} .talk .win li em{font-style:normal; color:var(--note); font-size:14px} .talk .win li.next b{color:var(--gold)} .talk .strip{display:grid; gap:4px; margin-top:6px} .talk .srow{display:grid; grid-template-columns:118px repeat(48, minmax(0,1fr)); gap:1px; align-items:center} .talk .srow .lab{font-size:13px; color:var(--title); font-weight:460; padding-right:12px; min-width:0; grid-column:1} .talk .srow .lab em{display:block; font-style:normal; font-size:11.5px; color:var(--note); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .talk .srow .h{height:26px; background:var(--sunk); border-radius:2px; position:relative} .talk .srow .h.sleep{background:#F6F2EA} .talk .srow .h.good{background:color-mix(in srgb, var(--gold) 34%, #FFFFFF)} .talk .srow .h.now{box-shadow:inset 0 0 0 2px var(--gold); z-index:1} .talk .srow.hours .h{height:14px; background:transparent; font-size:9.5px; color:var(--note); text-align:left; overflow:visible; white-space:nowrap; font-variant-numeric:tabular-nums} .talk .srow .h:first-of-type{border-radius:6px 2px 2px 6px} .talk .srow .h:last-of-type{border-radius:2px 6px 6px 2px} .talk .key{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--note); margin-top:10px} .talk .key i{display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-1px; margin-right:6px; background:var(--sunk)} .talk .key i.g{background:color-mix(in srgb, var(--gold) 34%, #FFFFFF)} .talk .key i.s{background:#F6F2EA; box-shadow:inset 0 0 0 1px var(--hair)} @media (max-width:760px){ .talk{padding:16px; overflow-x:auto} .talk .srow{grid-template-columns:86px repeat(48, 9px)} .talk .srow .lab{font-size:12px} } /* ---- rows of tools inside a stacked form keep their own size ----------------- */ form.stack .acts .btn,form.stack .acts button{margin:0} /* labels that are really choices keep their own type inside a stacked form */ form.stack label.facename,form.stack .seg2 label,form.stack label.whoname{text-transform:none; letter-spacing:-.01em; font-size:14.5px; margin:0; font-weight:460; display:inline-flex} form.stack .seg2 label{display:inline-block} form.stack .whoname span,form.stack .facename span{font-size:14.5px; font-weight:460} .news .row .linky{white-space:nowrap} /* a phone: the audience picker takes its own line, the sides stack without spilling */ @media (max-width:640px){ .composer .row .pick,.post-row .pick{max-width:100%} .pick select{min-width:0; max-width:100%} .composer .row .pick:has(select[name=audience]),.post-row .pick:has(select[name=audience]){flex:1 1 100%} .composer .row .pick:has(select[name=audience]) select,.post-row .pick:has(select[name=audience]) select{flex:1} } @media (max-width:760px){ .sides{grid-template-columns:minmax(0,1fr)} .side{min-width:0} .member .tx em{white-space:normal} } /* ===================================================================== ROUND 6: text lines up with the text inside the boxes, posts carry their state as pills, the audience picker, every emoji, group channels, the vendor thread, the who-sees-what matrix. ===================================================================== */ /* ---- one left edge for words on the page and words in a box ------------- */ /* (The left and right insets below are superseded by ROUND 10 at the end of the file — one --ln for every page. Their top and bottom paddings still hold.) */ .wrap > .back,.wrap > .tone,.wrap > .roomtitle,.wrap > .blurb,.wrap > p.note,.wrap > p.none,.wrap > .pagehead,.wrap > .filters,.wrap > .views,.wrap > .search,.wrap > .pager{margin-left:20px; margin-right:20px} .wrap > .search{margin-left:20px; margin-right:20px} form.stack{padding:22px 20px} .panel{padding:22px 20px} .onething{padding:24px 20px} .entry{padding:20px} .update{padding:22px 20px 24px} .stand{padding:20px} .task{padding:14px 20px} .mhead{padding:16px 20px 14px} .mbody{padding:0 20px 14px} .meeting .foot{padding:12px 20px 14px} .profile{padding:28px 20px} .dropbox{padding:22px 20px} .addtask{padding:12px 20px} .addtask input[type=text]{padding-left:0} .cal,.gantt{padding:18px 20px 16px} .talk{padding:20px} .page-body{padding:34px 20px} .photoview{padding:20px 20px 0} .photoview .cap{padding:20px 0 22px} .piece{padding:20px 20px 0} .piece .body{padding:18px 0 22px} .filmcap{padding:30px 20px} .hub-body{padding:0 20px 28px} .site .cap{padding:36px 20px 36px 24px} .linked{padding:14px 20px 16px} .stand-row,.p-nums{padding-left:0} @media (max-width:640px){ .wrap > .back,.wrap > .tone,.wrap > .roomtitle,.wrap > .blurb,.wrap > p.note,.wrap > p.none,.wrap > .pagehead,.wrap > .filters,.wrap > .views,.wrap > .search,.wrap > .pager{margin-left:16px; margin-right:16px} .sec{padding:0 16px} form.stack,.panel,.onething,.entry,.update,.stand,.profile,.dropbox,.talk,.page-body{padding-left:16px; padding-right:16px} .post .head,.post .say,.post .sum,.post .state{padding-left:16px; padding-right:16px} .composer{padding-left:16px; padding-right:16px} } /* ---- a post: who and when, then the words, then its state as pills --------- */ .post .head{padding:18px 20px 0} .post .state{display:flex; flex-wrap:wrap; gap:6px; padding:12px 20px 0} .post .state .pill,.pill{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 var(--bx); border-radius:980px; background:var(--sunk); font-size:13px; color:var(--body); white-space:nowrap} .post .state .pill.wait{color:var(--c-wine); background:color-mix(in srgb, var(--c-wine) 9%, #FFFFFF)} .post .state .pill.ok{color:var(--c-leaf); background:color-mix(in srgb, var(--c-leaf) 12%, #FFFFFF)} .post .state .pill .due{color:inherit} .post .state .pill .due.late{color:var(--bad)} /* ---- the audience picker ------------------------------------------------------ */ .picker{position:relative} .picker > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:flex-start; gap:7px; min-height:36px; padding:7px 12px 7px var(--bx); border-radius:10px; background:var(--sunk); font-size:15px; line-height:1.45; max-width:100%; color:var(--note); max-width:100%} .picker > summary::-webkit-details-marker{display:none} .picker > summary .k{flex:none} .picker > summary [data-label]{color:var(--ink); font-weight:440; min-width:0; flex:0 1 auto; white-space:normal; overflow-wrap:anywhere} .picker > summary [data-label] i{font-style:normal; color:var(--note)} .picker > summary::after{content:""; width:6px; height:6px; margin-top:7px; border-right:1.5px solid var(--note); border-bottom:1.5px solid var(--note); transform:rotate(45deg) translate(-1px,-2px); flex:none} .picker[open] > summary{background:#EAE3D7; color:var(--title)} .picker .pop{ position:absolute; z-index:60; left:0; top:calc(100% + 8px); width:min(720px, calc(100vw - 44px)); background:var(--card); border-radius:16px; box-shadow:0 1px 1px rgba(40,32,20,.05), 0 26px 54px -22px rgba(40,32,20,.5); padding:14px 16px 12px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px 18px; } .picker .pgroup{min-width:0} .picker .pk{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--note); font-weight:500; margin:2px 0 6px} .picker label{display:flex; align-items:center; gap:9px; padding:6px 4px; font-size:14.5px; color:var(--ink); cursor:pointer; border-radius:8px} .picker label:hover{background:var(--sunk)} .picker input{accent-color:var(--gold); width:16px; height:16px; margin:0; flex:none} .picker .pfoot{grid-column:1 / -1; display:flex; align-items:center; gap:12px; border-top:1px solid var(--hair); padding-top:10px; margin-top:4px} .picker .pfoot .note{flex:1; font-size:13px} form.stack .picker{display:block} form.stack .picker > summary{min-height:48px; border-radius:12px; padding:12px 16px 12px var(--bx); width:100%; font-size:16px} form.stack .picker > summary [data-label]{flex:1} form.stack .picker > summary::after{margin-top:8px} @media (max-width:760px){ .picker .pop{grid-template-columns:1fr; width:min(420px, calc(100vw - 44px)); max-height:70vh; overflow:auto} } .post-row .picker,.composer .row .picker{max-width:100%} /* ---- every emoji ------------------------------------------------------------- */ .react .panel .plus{font-size:20px; color:var(--body); font-weight:400} .egrid{ position:absolute; left:0; bottom:calc(100% + 6px); z-index:6; width:min(372px, calc(100vw - 60px)); max-height:236px; overflow:auto; display:grid; grid-template-columns:repeat(8, 1fr); gap:2px; padding:8px; background:var(--card); border-radius:16px; box-shadow:0 1px 1px rgba(40,32,20,.06), 0 18px 44px -16px rgba(40,32,20,.5); } .egrid[hidden]{display:none} .egrid button{width:40px; height:40px; padding:0; border-radius:10px; background:transparent; font-size:22px; line-height:1} .egrid button:hover{background:var(--sunk); transform:scale(1.15)} .react.big .panel{display:none !important} .actions.loose .react .egrid,.acts .react .egrid{bottom:auto; top:calc(100% + 6px)} .actions.loose .react .panel,.acts .react .panel{bottom:auto; top:calc(100% + 6px)} /* ---- groups in messages -------------------------------------------------------- */ .threads-k{display:flex; align-items:center; justify-content:space-between; padding:12px 16px 6px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--note); font-weight:500} .threads-k .linky{font-size:13px; letter-spacing:0; text-transform:none; font-weight:500} .threads-k + .thread{border-top:0} .gdisc{width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center; background:color-mix(in srgb, var(--c-gold) 16%, #FFFFFF)} .gdisc i{font-style:normal; font-family:var(--display); font-size:20px; color:var(--gold); line-height:1} .chat-head .gdisc{width:36px; height:36px} .chat-head .gdisc i{font-size:16px} .thread.grp .gdisc{background:color-mix(in srgb, var(--c-slate) 14%, #FFFFFF)} .thread.grp .gdisc i{color:var(--c-slate)} .thread.grp[href="/messages/g/side-bride"] .gdisc,.chat[data-group="side-bride"] .gdisc{background:color-mix(in srgb, var(--c-rose) 14%, #FFFFFF)} .thread.grp[href="/messages/g/side-bride"] .gdisc i,.chat[data-group="side-bride"] .gdisc i{color:var(--c-rose)} .faces{display:inline-flex; align-items:center; vertical-align:middle; margin-right:6px} .faces .avatar.xs{margin-right:-6px; box-shadow:0 0 0 2px var(--card)} .faces em{font-style:normal; font-size:12px; color:var(--note); margin-left:10px} .bubble .from{display:block; font-size:12.5px; font-weight:500; color:var(--c-wine); margin:0 0 2px} .bubble.me .from{display:none} .chatwrap.solo{grid-template-columns:1fr; min-height:0} .chatwrap.solo .bubbles{max-height:360px; min-height:120px} .chatwrap.solo .chat{display:flex} .vendorsay.reply{padding-top:0} .vendorsay.reply input[name=body]{background:transparent; box-shadow:inset 0 0 0 1.5px var(--hair)} .chat .say button:disabled{opacity:.5} /* ---- who sees what -------------------------------------------------------------- */ .access .gl-h{margin-bottom:10px} .matrix{overflow:auto; margin:0 -4px} .matrix table{border-collapse:collapse; width:100%; min-width:720px} .matrix th{font-weight:500; font-size:13.5px; color:var(--body); text-align:left; padding:6px 8px; white-space:nowrap} .matrix thead th{vertical-align:bottom; text-align:center; padding:0 2px 8px} .matrix thead th span{display:inline-block; writing-mode:vertical-rl; transform:rotate(180deg); font-size:12px; color:var(--note); letter-spacing:.01em; white-space:nowrap; line-height:1.1; padding:4px 0} .matrix tbody th{border-top:1px solid var(--hair)} .matrix td{text-align:center; border-top:1px solid var(--hair); padding:8px 2px} .matrix input{accent-color:var(--gold); width:17px; height:17px; margin:0; cursor:pointer} .matrix tbody tr:hover th,.matrix tbody tr:hover td{background:var(--sunk)} /* ===================================================================== ROUND 7: the mark and the wordmark, the head as one composition, lobby clocks, drawn room icons, hashtags, select mode in an album. ===================================================================== */ /* ---- the mark and the wordmark ------------------------------------------- */ .brand{gap:12px; color:var(--title)} /* the picture and its shape are the house's own (its dress, views/layout.js dressStyle) */ .mark.img{display:inline-block; aspect-ratio:var(--mark-ratio, 96/46); background:var(--gold); flex:none; vertical-align:middle; -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat} .brand .mark.img{height:var(--mark-bar-h, 22px) !important} .brand .wm{font-family:var(--display); font-size:20px; letter-spacing:-.005em; color:var(--title); font-weight:500; white-space:nowrap} .brand .wm i{font-style:normal; color:var(--gold); font-size:.82em; padding:0 .1em} .foot .foot-mark{display:block; margin:0 auto 14px; line-height:0} .foot .foot-mark .mark.img{height:var(--mark-foot-h, 34px) !important} .f-tags{display:flex; justify-content:center; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:14px; color:var(--gold); font-weight:460} .topcard .cover .cover-mark{position:absolute; left:30px; top:50%; transform:translateY(-50%); line-height:0} .topcard .cover .cover-mark .mark.img{height:var(--mark-cover-h, 40px) !important} @media (max-width:900px){ .brand .wm{font-size:18px} } @media (max-width:520px){ .brand .wm{display:none} } /* ---- lobby clocks: a face with hands, light by day and dark by night ------- */ .lclock{display:inline-flex; align-items:center; gap:8px; color:inherit} .lclock svg{width:26px; height:26px; flex:none} .lclock .face{fill:#FFFFFF; stroke:var(--title); stroke-width:1.2} .lclock .hh,.lclock .mh{stroke:var(--title); stroke-width:1.6; stroke-linecap:round} .lclock .mh{stroke-width:1.2} .lclock .pin{fill:var(--gold)} .lclock.night .face{fill:var(--title); stroke:var(--title)} .lclock.night .hh,.lclock.night .mh{stroke:#FCFAF7} .lclock .tx{display:flex; flex-direction:column; line-height:1.05} .lclock .tx b{font-size:15.5px; font-weight:500; color:var(--title); font-variant-numeric:tabular-nums; letter-spacing:-.01em; white-space:nowrap} .lclock .tx em{font-style:normal; font-size:12px; color:var(--body); margin-top:3px; letter-spacing:.01em} .lclock .tx em i{font-style:normal} .tb-clocks{gap:22px; padding:4px 12px; margin-left:auto} .tb-clocks b.night::before{content:none} @media (max-width:900px){ .tb-clocks{gap:14px; padding:2px 6px} .lclock svg{width:22px; height:22px} .lclock .tx b{font-size:13.5px} .lclock .tx em{font-size:10.5px} } @media (max-width:420px){ .lclock .tx em{display:none} .tb-clocks{gap:10px} } /* ---- the doors: drawn icons on tinted discs ---------------------------------- */ .door .disc svg{width:26px; height:26px; stroke-width:1.6} .roomsmenu .menu i svg{width:18px; height:18px} .door[href="/family"]{--c:var(--c-plum)} .menu a[data-door="/family"]{--c:var(--c-plum)} .door[href="/notes"]{--c:var(--c-slate)} .menu a[data-door="/notes"]{--c:var(--c-slate)} .door[href="/people"]{--c:var(--c-terracotta)} .menu a[data-door="/people"]{--c:var(--c-terracotta)} @media (max-width:680px){ .door .disc svg{width:23px; height:23px} } /* ---- photographs keep the top of the frame where they are cropped ------------ */ .gl-shots img,.post .pics img,.update .pics img,.tile .collage img,.feature .strip img{object-position:center top} .album .shot{object-position:center 22%} /* ---- a photograph's page: the caption as a field, taking it out as an action -- */ .captionline{display:flex; gap:8px; align-items:center; margin:0 0 8px} .captionline input{flex:1 1 0; min-width:0; font:inherit; font-size:16px; border:0; background:var(--sunk); border-radius:10px; padding:0 var(--bx); height:40px; color:var(--ink); outline:none} .captionline input:focus{box-shadow:inset 0 0 0 1.5px var(--gold)} .photoview .caption{font-size:17px; color:var(--ink); margin-bottom:6px} .actions.loose form{display:inline-flex} /* ---- select mode in an album -------------------------------------------------- */ .selbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; min-height:36px} .selbar .selacts{display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap} .selbar .selacts[hidden]{display:none} .selbar .danger svg{width:16px; height:16px} .tickbox{position:absolute; top:8px; right:8px; display:none; cursor:pointer} .tickbox input{position:absolute; opacity:0; width:1px; height:1px} .tickbox i{display:block; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.88); box-shadow:inset 0 0 0 1.6px rgba(0,0,0,.28)} .selecting .tickbox{display:block} .selecting .photos > a:has(input:checked){box-shadow:inset 0 0 0 3px var(--gold)} .selecting .photos > a:has(input:checked) .tickbox i{background:var(--gold); box-shadow:none} .selecting .photos > a:has(input:checked) .tickbox i::after{content:"✓"; color:#fff; font-size:14px; font-weight:500; position:absolute; inset:0; display:grid; place-items:center} .selecting .photos > a img{transition:transform .15s} .selecting .photos > a:has(input:checked) img{transform:scale(.96)} /* ---- hashtags ----------------------------------------------------------------- */ .hashline{font-size:16px; color:var(--body); margin:-10px 0 24px} .hashline b{color:var(--gold); font-weight:500; margin-right:6px} /* to its right: a tag that begins a line starts on it */ .hashform{padding-top:18px; padding-bottom:18px} /* the bar's clocks sit face-then-time in a row; the old column rule for the bar's spans must not win */ .tb-clocks .lclock{flex-direction:row; align-items:center} .tb-clocks .lclock .tx{flex-direction:column; align-items:flex-start} .lclock .tx em{text-transform:none; letter-spacing:.01em} /* ---- the pair of faces: the first in front, facing in, each with an edge that shows on white, and only a touch of overlap on a card --------------------- */ .pair img{position:relative; box-shadow:0 0 0 2.5px var(--card), 0 0 0 3.5px rgba(28,25,23,.16)} .pair img:first-child{z-index:1} .pair img + img{margin-left:-6px} /* the mark: explicit boxes, since a flex item ignores the aspect ratio (the house's own, from its dress) */ .brand .mark.img{width:var(--mark-bar-w, 46px); height:var(--mark-bar-h, 22px) !important} .foot .foot-mark .mark.img{width:var(--mark-foot-w, 72px); height:var(--mark-foot-h, 34px) !important; margin:0 auto 18px; opacity:.75} /* what a retired footer rule gave the painted mark (still inline-block), kept (P7) */ .topcard .cover .cover-mark .mark.img{width:var(--mark-cover-w, 84px); height:var(--mark-cover-h, 40px) !important} /* ---- the guest register ------------------------------------------------- */ .regnums{display:flex; gap:26px; flex-wrap:wrap; margin:0 0 16px; padding:0 20px} .regnums a{display:block; text-decoration:none; color:inherit} .regnums b{display:block; font-size:30px; line-height:1; font-weight:500; letter-spacing:-.03em; color:var(--title); font-variant-numeric:tabular-nums} .regnums em{display:block; font-style:normal; font-size:13px; color:var(--note); margin-top:5px} .evline{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 22px; padding:0 20px} .evline span{background:var(--card); box-shadow:var(--lift); border-radius:12px; padding:9px var(--bx); font-size:14px; color:var(--note)} .evline b{color:var(--title); font-variant-numeric:tabular-nums} .pill.yes{color:var(--c-leaf); background:color-mix(in srgb, var(--c-leaf) 12%, #FFFFFF)} .pill.no{color:var(--c-wine); background:color-mix(in srgb, var(--c-wine) 9%, #FFFFFF)} .list .row.hh .r{display:flex; align-items:center; gap:10px} .list .row.hh .r .avatar.xs{margin:0} .evticks{display:inline-flex; gap:6px; flex-wrap:wrap; vertical-align:middle} .evticks span,.evticks label{font-size:13px; padding:5px var(--bx); border-radius:980px; background:var(--sunk); color:var(--note); cursor:default} .evticks span.on,.evticks label.on{background:color-mix(in srgb, var(--gold) 20%, #FFFFFF); color:var(--title)} .evticks.pick-ev label{cursor:pointer; text-transform:none; letter-spacing:0; font-weight:500; margin:0} .evticks.pick-ev input{margin:0 4px 0 0; vertical-align:-1px} .evticks.pick-ev label:has(input:checked){background:color-mix(in srgb, var(--gold) 20%, #FFFFFF); color:var(--title)} .kv{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:8px 18px; font-size:15.5px; margin:0} .kv dt{color:var(--note)} .kv dd{margin:0; color:var(--title)} .stack label.pick input[type=checkbox]{width:auto; margin-right:8px} @media (max-width:640px){ .regnums{gap:18px} .regnums b{font-size:26px} .kv{grid-template-columns:1fr; gap:2px 0} .kv dt{margin-top:8px} } /* ---- Let's meet: room in the selects, and someone from outside the house ------ A select takes its height from its padding, so descenders are never cut. (The page's one line and one weight became the whole house's: ROUND 10.) */ form.stack select{height:auto; padding:12px 40px 12px var(--bx); line-height:1.35} .timepick select{height:auto; padding:10px 40px 10px var(--bx)} .withmore{display:flex; gap:8px; margin-top:10px} .withmore input{flex:1; min-width:0} @media (max-width:640px){ .withmore{flex-wrap:wrap} .withmore input{flex:1 1 220px} } /* ===================================================================== ROUND 10: ONE LINE, ONE WEIGHT, on every page (23 September 2026). Notes on Let's meet — "align every thing to one vertical line … use the word 'What' in the last text box", "remove bold" — and then "apply the same alignment and no-bold rules to every page". THE LINE. Every word on a page starts at one x: --ln in from the edge of its column (36 on a desktop, 28 on a phone) — the title, the eyebrows, the labels and hints, the words in every card, and the words inside every field, pill, chip and button. A thing with its own background hangs left by exactly its own inset (--bx, the same for every box) so its words land on the line; a card hangs left by the whole of --ln. A face or a picture that begins a row sits on the line. --rt is a card's right inset, where its boxes stop. --hang is how far a row of boxes moves to put its words on the line where it stands: on the page, inside a card, inside a form. ONE WEIGHT. Nothing is heavier than 500: every weight above was rewritten in place, and b, strong, th and h1–h3 are 500 at the top of the file. ===================================================================== */ :root{--ln:36px; --bx:16px} @media (max-width:640px){ :root{--ln:28px; --bx:14px} } :root{--rt:calc(var(--ln) - var(--bx))} body > .wrap{--hang:calc(var(--ln) - var(--bx))} /* ---- words on the page itself ------------------------------------------ */ body > .wrap > .back,body > .wrap > .roomtitle,body > .wrap > .blurb,body > .wrap > .pagehead, body > .wrap > .hashline,body > .wrap > .regnums,body > .wrap > p:not(.acts):not(.pillrow), body > .wrap > h1,body > .wrap > h2,body > .wrap > .display{ margin-left:0; margin-right:0; padding-left:var(--ln); padding-right:var(--rt)} body > .wrap > .tone{margin-left:var(--ln)} .sec,.group > h2{padding-left:var(--ln); padding-right:var(--rt)} .group.fold > summary{padding-left:calc(var(--ln) - 20px)} /* the drawn chevron hangs in front */ body > .wrap > section > .slot,body > .wrap > section > p{padding-left:var(--ln); padding-right:var(--rt)} /* the week, hour by hour */ .regnums{padding-right:0} .evline{padding-left:0; padding-right:0} /* ---- cards: the words inside start on the line -------------------------- */ .panel,.onething,.entry,.update,.stand,.profile,.dropbox,.addtask,.cal,.gantt,.talk,.page-body,.filmcap,.hub-body, .site .cap,.chead .ident,.topcard .ident,.linked,.glance,.fromus,.latest-update,.side,.foldout,.answerbox,.storm-note, .newstrip,.handoff-strip,.filed,.album .cap,.albums.small .album .cap,.day .cap,.cardtile .cap,.clip > span, .thread,.threads-k,.chat-head,.percard,.list .row,.list a.row,.task,.qrow,.mhead,.mbody,.meeting .foot,.composer, form.post,form.login,.famdoor,.rooms a,.tile.slim,.outlink .cap,.outlink.row, .post .head,.post .say,.post .sum,.post .replies,.post .replybox,.post.replybox{ padding-left:var(--ln); padding-right:var(--rt); --hang:calc(-1 * var(--bx))} .entry.is-done{padding-left:var(--ln); padding-right:0} .askbar{padding-left:var(--ln)} .site .shot{padding-left:var(--ln)} .photoview .cap,.piece .body{padding-left:calc(var(--ln) - 20px); --hang:calc(-1 * var(--bx))} /* inside a 20px frame */ .handoff-strip{display:flex; align-items:center; gap:12px; text-decoration:none; border-radius:14px; padding-top:15px; padding-bottom:15px; margin:0 0 16px; color:var(--title); font-size:16px} .handoff-strip .arrow{margin-left:auto} /* ---- a post: one card, every part of it on the line --------------------- */ article.post,div.post{padding:0} .post textarea{padding-left:0; padding-right:0} .post .state{padding-left:calc(var(--ln) - var(--bx)); padding-right:var(--rt)} .post .shots{padding:14px var(--rt) 0 calc(var(--ln) - var(--bx))} .post .answer{margin:14px var(--rt) 0 calc(var(--ln) - var(--bx))} .answer{margin-left:var(--hang)} /* ---- a list, a fold or a form inside a card is part of that card ---------- */ :is(.panel,.foldout,.side,.profile,.update,.stand,.onething,.glance,.linked,.entry,.mbody) .list{background:transparent; box-shadow:none; border-radius:0} :is(.panel,.foldout,.side,.profile,.update,.stand,.onething,.glance,.linked,.entry,.mbody) .list :is(.row,a.row){padding-left:0; padding-right:0} :is(.panel,.side,.profile,.update,.stand,.onething,.glance,.linked,.entry) .foldout{background:transparent; box-shadow:none; border-radius:0; padding-left:0; padding-right:0} :is(.panel,.foldout,.side,.profile,.update,.stand,.onething,.glance,.linked,.entry,.mbody) form.stack{ margin-left:calc(-1 * var(--bx)); padding-left:0; padding-right:0; background:transparent; box-shadow:none; --hang:0px} .foldout > summary{margin-left:-24px} /* the chevron hangs; the words sit on the line */ /* ---- a stacked form: labels and hints on the line, its boxes hang by --bx -- */ form.stack{padding-left:calc(var(--ln) - var(--bx)); padding-right:var(--rt); --hang:0px} form.stack label:not(.facename):not(.pick):not(.whoname):not(.tick-me):not(.seg2 label):not(.evticks label):not(.picker label):not(.photos label), form.stack .note:not(.acts .note):not(.picker .note),form.stack > p,form.stack > h2,form.stack > h3,form.stack > div > p,form.stack .gl-h{ padding-left:var(--bx)} form.stack .note{max-width:none} /* ---- rows of boxes: the first box's words land on the line ---------------- */ body > .wrap .acts,body > .wrap .filters,body > .wrap .search,body > .wrap .views,body > .wrap .evline,body > .wrap .doors, body > .wrap .selbar,body > .wrap .album-foot,body > .wrap .actions.loose,body > .wrap .chips,body > .wrap .faces-pick, body > .wrap .who-list,body > .wrap .captionline,body > .wrap .withmore,body > .wrap .timepick,body > .wrap .opts, body > .wrap .link-line,body > .wrap .pillrow,body > .wrap .panel > .evticks{margin-left:var(--hang)} body > .wrap .views > .filters,body > .wrap .opts .acts{margin-left:0} :is(.panel,.side,.profile,.onething,.entry,.glance,.stand,.update,.linked,.foldout) > :is(.btn,button){margin-left:var(--hang)} form.login .code input,.famdoor .code input,.famdoor .whofind{margin-left:var(--hang)} .meeting .foot > .btn:first-child{margin-left:calc(-1 * var(--bx))} .map .map-cards{padding-left:calc(var(--ln) - var(--bx) - 10px)} /* inside the map's 10px frame */ .bubbles{padding-left:calc(var(--ln) - 14px)} /* a bubble's words on the line */ .chat .say{padding-left:calc(var(--ln) - var(--bx))} .attached{margin-left:var(--bx)} .cal-grid{margin-left:-6px} /* a day's number on the line */ @media (max-width:700px){ .cal-grid{margin-left:-12px} } .matrix{margin-left:-8px} .list.news .row.fresh::before{margin-left:-18px; margin-right:10px} /* the new-dot hangs; the face stays on the line */ .slot.now::before{display:none} /* the "here now" dot was never meant for the schedule */ .facepick{padding-left:var(--bx)} /* a face in a form sits on the line */ /* ---- every button has the same inset now (quiet ones too), so a lone one hangs like a row */ body > .wrap > form:not([class]):has(> button.quiet,> button.danger){margin-left:var(--hang)} .cal-head > .btn:first-child{margin-left:calc(-1 * var(--bx))} .acts > .note:first-child{padding-left:var(--bx)} /* words that begin a row of boxes */ .dropctl{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-left:auto} .post-row > .pick.file:first-child{margin-left:calc(-1 * var(--bx))} .addtask select,.addtask input[type=date]{padding-left:var(--bx)} .addtask > :is(select,input[type=date]):first-child{margin-left:calc(-1 * var(--bx))} .addtask > button{margin-left:auto} /* the action ends the row, wherever it wraps */ .day .c .nb{white-space:nowrap} /* "0 photographs" never breaks in the middle */ .list .row .t + br{display:none} /* .t is a block already; the break only added an empty line */ .addtask input[type=text]{flex:1 1 160px} /* narrow enough that a row fits above 1000px */ @media (max-width:900px){ .acts > .note:not(:first-child){flex:1 1 100%; padding-left:var(--bx)} /* a note under its buttons, on the line */ } @media (max-width:1000px){ .addtask{flex-direction:column; align-items:stretch; gap:10px} /* an add row stacks: words, then each box */ .addtask > *,.addtask input[type=text]{flex:none} /* a width basis would become a height in a column */ .addtask > :is(select,input[type=date],button){margin-left:calc(-1 * var(--bx)); align-self:flex-start} } @media (max-width:640px){ .dropctl{margin-left:calc(-1 * var(--bx))} /* the controls wrap under the words: hang them */ .list .row.contact .r.acts{margin-left:calc(-1 * var(--bx))} /* WhatsApp and Call wrap under the number */ .kv dd > .evticks{margin-left:calc(-1 * var(--bx))} /* the days sit under their label */ .fromus{flex-direction:column; align-items:flex-start; gap:12px} /* their faces above their words, not squeezing them */ .mhead{display:grid; grid-template-columns:54px minmax(0,1fr); column-gap:14px; row-gap:8px; align-items:start} .mhead .pill{grid-column:2; justify-self:start} /* the state under the title, so the title has room */ } .chat .say-row input[name=body]{padding-left:var(--bx)} /* ---- who a post is for takes a line of its own, above the rest, hanging so "for" is on the line */ .composer .row .picker,.post-row .picker{order:-1; flex:1 1 100%; margin-left:calc(-1 * var(--bx))} .composer .row .picker > summary,.post-row .picker > summary{max-width:none} /* ===================================================================== ROUND 11: THE HOME, SEVEN NOTES (23 September 2026, late). ===================================================================== */ /* ---- the head: two bands, not a list of lines ------------------------------ "The header is not well designed — it's just elements on different lines." Under the photograph and the two faces, the first band is who and how soon: the names and the where on the left, the days to go on the right, on the same baseline. The second band is the house right now, in equal cells you can walk into: the two cities' clocks, then the counts. The cells start under the faces, so nothing there is empty. */ .chead{background:var(--card); border-radius:22px; box-shadow:var(--lift); overflow:hidden; margin:22px 0 28px} .chead .cover{display:block; width:100%; height:clamp(200px,30vw,340px); object-fit:cover; object-position:center 30%; background:var(--sunk)} .chead div.cover{position:relative; background:linear-gradient(118deg,#F8F2E6 0%,#EFE5D1 52%,#F7F1E4 100%)} .chead .ident{display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"pair who togo"; column-gap:28px; align-items:start; padding-top:0; padding-bottom:26px; padding-right:var(--ln)} .chead .pair{grid-area:pair; display:flex; margin-top:-46px} .chead .pair img{width:108px; height:108px; border-radius:50%; object-fit:cover; display:block; background:var(--sunk); box-shadow:0 0 0 5px var(--card), 0 0 0 6px rgba(28,25,23,.12), 0 10px 26px -14px rgba(40,32,20,.55)} .chead .pair img + img{margin-left:-12px} .chead .who{grid-area:who; min-width:0; padding-top:18px} .chead .who h1,.chead .togo b{font-family:var(--display); font-weight:500; letter-spacing:-.024em; line-height:1.02; font-size:clamp(34px,4.4vw,52px); color:var(--title)} .chead .who .when,.chead .togo em{display:block; margin:8px 0 0; font-size:15.5px; line-height:1.45; color:var(--body); font-style:normal} .chead .who .when .tags{color:var(--gold)} .chead .togo{grid-area:togo; display:block; padding-top:18px; color:inherit; text-decoration:none; white-space:nowrap} .chead .togo b{display:block; font-variant-numeric:lining-nums tabular-nums} .chead .togo:hover b{color:var(--gold)} .chead .hnow{display:flex; border-top:1px solid var(--hair)} .chead .hnow .hn-g{display:contents} .chead .hn{flex:1 1 0; min-width:0; display:flex; align-items:center; padding:17px 20px 19px; border-left:1px solid var(--hair); color:inherit; text-decoration:none} .chead .hn-g.clocks .hn{flex-grow:1.35} .chead .hn-g:first-child .hn:first-child{border-left:0; padding-left:var(--ln)} .chead .hn-g:last-child .hn:last-child{padding-right:var(--ln)} .chead a.hn:hover{background:var(--sunk)} .chead .hn > b{display:block} .chead .hn b,.chead .hn .lclock .tx b{font-size:20px; line-height:1.15; font-weight:500; letter-spacing:-.02em; color:var(--title); font-variant-numeric:tabular-nums; white-space:nowrap} .chead .hn em,.chead .hn .lclock .tx em{display:block; font-style:normal; font-size:13px; line-height:1.3; color:var(--body); margin-top:3px; white-space:nowrap; letter-spacing:.005em} .chead .hn:not(:has(.lclock)){flex-direction:column; align-items:flex-start; justify-content:center} .chead .hn .lclock{gap:10px} .chead .hn .lclock svg{width:30px; height:30px} .chead .hn .lclock .tx{line-height:normal} .chead a.hn:hover b{color:var(--gold)} @media (max-width:900px){ .chead .hnow{display:block} .chead .hnow .hn-g{display:flex} .chead .hnow .hn-g + .hn-g{border-top:1px solid var(--hair)} .chead .hn-g .hn:first-child{border-left:0; padding-left:var(--ln)} .chead .hn-g.clocks .hn{flex-grow:1} } @media (max-width:640px){ .chead{margin:14px 0 22px} .chead .cover{height:clamp(190px,56vw,250px)} .chead .ident{grid-template-columns:auto minmax(0,1fr); grid-template-areas:"pair togo" "who who"; column-gap:16px; row-gap:14px; padding-bottom:20px} .chead .pair{margin-top:-40px} .chead .pair img{width:84px; height:84px} .chead .pair img + img{margin-left:-8px} .chead .who{padding-top:0} .chead .togo{justify-self:end; padding-top:12px} .chead .togo em{font-size:14px; margin-top:4px} .chead .hn{padding:14px 14px 16px} .chead .hn b,.chead .hn .lclock .tx b{font-size:18px} .chead .hn em,.chead .hn .lclock .tx em{font-size:12.5px; display:block} .chead .hn .lclock svg{width:26px; height:26px} .chead .hn .lclock{gap:8px} } /* ---- the mark beside the names --------------------------------------------------- A rule for a retired picture of the same class name gave the mark a 26px margin under it and 70% opacity, so it sat 13px above the names and paler than the gold "&". Gone; and since a painted mark can leave clear space at the right of its box, the gap is set on the ink, not on the box. */ .brand{gap:4px} .brand .mark.img{margin:0; opacity:1; transform:translateY(-1px)} /* ---- the small capital headings: darker, not heavier --------------------------- "The headings … seem a little washed out — maybe a medium font weight?" They were already medium (500), and nothing may go above it; what washed them out was the pale grey at 12px. Every neutral heading of this kind now uses one ink, the same everywhere: the rail's cards, the home's sections, the plan's groups, the pages' headings, the login's sides, the cards' small labels. (Inside a room the section heads keep that room's colour.) */ :root{--eyebrow:#3A3531} .gl-h,.eyebrow,.group > h2,.group.fold > summary,.page-body h3,.update .body h3,.percard .k,.tile.num .k, .filmcap .k,.who-k,.circle-k,.mplace.call .k,.threads-k,.picker .pk{color:var(--eyebrow); font-weight:500} .sec h2{color:var(--c, var(--eyebrow))} /* ---- one rhythm down the home ---------------------------------------------------- "Add a bit more spacing between the AI section and 'from the two of us'." The gaps between the home's blocks were 16, 26, 30, 16, 30, 28 and 36. Now every block is 28 from the next. */ body > .wrap > :is(.onething,.dock,.askbar,.fromus,.days,.site,.handoff-strip,.storm-note){margin-bottom:28px} /* ---- the website's buttons: a block, not a ragged row ------------------------ "The buttons on the right are not properly aligned." Four actions of four widths wrapped two and two, with a text link hanging off the second row. Now two by two, all the same width, the gold one first: what to open on top, the two links to send underneath. The words in the left column stay on the card's line; the block's right edge is straight. */ .site .acts.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-width:448px; margin-top:10px} .site .acts.grid2 .btn{width:100%; justify-content:flex-start} @media (max-width:560px){ .site .acts.grid2{grid-template-columns:1fr; max-width:none} } /* ---- how is today? ----------------------------------------------------------- "Whenever either of us clicks one, it should send a notification to the other." It does now (a notice, in words); the card says what the other said, and whether they have seen yours. On your own storm day the rail is hidden, so the choice sits in the short version too, and the day can be set back. */ .gl-note{display:block; font-size:13px; line-height:1.4; color:var(--note); margin-top:4px} .moodcard .gl-sub b{text-transform:none; font-weight:500} .storm-day{margin-top:18px; padding-top:16px; border-top:1px solid rgba(28,25,23,.08)} .storm-day .seg3{display:flex; gap:6px; margin:2px 0 8px; max-width:340px} .storm-day .seg3 button{flex:1 1 0; padding:0 8px; background:#FFFFFF} .storm-day .seg3 button[aria-pressed=true]{background:var(--title)} /* ---- the foot of the home: the posts and the rail end on one line ------------- "The bottom section is not aligned properly." The last post's card ended 16px above the rail's last card: the gap every post keeps under itself. The column gives that last gap back, and app.js §20 lets the rail scroll with the page and stop at the same line (it used to stick at the top and hide its own last cards until the very end). */ .twocol > .stream{margin-bottom:-16px} /* the head, finished at every width: the where breaks at its dots, never inside the venue; on a phone the clocks take the room their words need, and on the narrowest the word for the hour gives way (the dark face already says night) */ @media (min-width:641px){ .chead .when .nb{white-space:nowrap} } @media (max-width:640px){ .chead .hn-g.clocks .hn{flex:1 1 auto} } @media (max-width:380px){ .chead .hn .lclock .pod{display:none} } /* ===================================================================== ROUND 12: THE HOME, FIVE NOTES (23 September 2026, night). ===================================================================== */ /* ---- their own page wears their letters ------------------------------------ "From the two of us": no photographs of theirs, only their initials. The letters in the serif of their names, in the room's terracotta, on the room's pale disc like every other door; the same mark in the Rooms menu, on the card that carries their latest word, and at the head of their page. Their faces stay where they are the point: the head of the house. */ .usmark{font-family:var(--display); font-weight:400; font-size:22px; line-height:1; letter-spacing:.03em; color:var(--c-terracotta); font-variant-numeric:lining-nums; white-space:nowrap} .door .disc .usmark{color:inherit; font-size:20px; transform:translateY(1px)} .roomsmenu .menu i .usmark{font-size:12.5px; color:inherit; letter-spacing:.02em} .usmark.big{display:grid; place-items:center; flex:none; width:58px; height:58px; border-radius:50%; background:color-mix(in srgb, var(--c-terracotta) 14%, #FFFFFF); font-size:21px; padding-top:1px} .pagehead .usmark.big{width:64px; height:64px; font-size:23px} @media (max-width:680px){ .door .disc .usmark{font-size:17px} } /* ---- the head: centred cells, the same clocks as the bar, a little colour ---- "Center 44 photographs, 12 coming, 60 still to do in their boxes": every cell of the strip now holds its words in its middle, the clocks too, so the strip reads as five tiles. The bar's clocks are the head's clocks: the time, then the city and the word for the hour; the face is dark exactly when that word says night. "Add slight colours to the home header": colour that says something — each count wears the colour of the room it opens (its door's colour in the dock), each clock the colour of the hour in its city, and the & and the days to go take the gold off their cards. */ .chead .hn{justify-content:center; text-align:center} .chead .hn:not(:has(.lclock)){align-items:center} .chead .hn-g:first-child .hn:first-child{padding-left:20px} .chead .hn-g:last-child .hn:last-child{padding-right:20px} .chead .hn .lclock .tx{text-align:left} .chead .who h1 i{font-style:normal; color:var(--gold)} .chead .togo b{color:var(--gold)} .chead .togo:hover b{color:color-mix(in srgb, var(--gold) 78%, #1C1917)} /* the hour's colours: night the deep blue of the map's night side, then the morning's peach, the afternoon's marigold, the evening's plum */ .chead .hn:has(.lclock){--tone:var(--c-marigold)} .chead .hn:has(.lclock[data-pod="night"]){--tone:#34406A} .chead .hn:has(.lclock[data-pod="morning"]){--tone:var(--c-peach)} .chead .hn:has(.lclock[data-pod="evening"]){--tone:var(--c-plum)} .chead .hn:has(.lclock),.chead .hn[data-tone]{background:color-mix(in srgb, var(--tone) 7%, #FFFFFF)} .chead a.hn:has(.lclock):hover,.chead a.hn[data-tone]:hover{background:color-mix(in srgb, var(--tone) 13%, #FFFFFF)} .chead .hn[data-tone] b,.chead a.hn[data-tone]:hover b{color:color-mix(in srgb, var(--tone) 80%, #1C1917)} .chead a.hn:hover .lclock .tx b{color:var(--title)} /* one clock, in the bar and in the head: the night face the same deep blue, the time in the title ink at every hour, the word for the hour on one line */ .lclock.night .face{fill:#34406A; stroke:#34406A} .tb-clocks b.night{color:var(--title)} .tb-clocks .lclock .pod{display:inline} @media (max-width:960px){ .tb-clocks .lclock .pod{display:none} } /* no room in a narrower bar; the head keeps the word */ /* ---- buzz this phone ---------------------------------------------------------- "Let's do the phone buzz on 'How is today?'" The card says, for the phone it is on, whether it buzzes when the other one answers — and offers to, to test it, or to stop. An iPhone in Safari is told how to put the house on its Home Screen first (Apple allows the buzz only there). */ /* the Rooms menu breaks a long name evenly: "From the two / of us", not "…of / us" */ .roomsmenu .menu a span{text-wrap:balance} .moodcard .buzz{margin-top:12px; padding-top:12px; border-top:1px solid var(--hair)} .moodcard .buzz[hidden]{display:none} .moodcard .buzz .gl-note{margin:0 0 8px} .moodcard .buzz .buzz-acts{display:flex; flex-wrap:wrap; gap:6px; margin-left:var(--hang)} .moodcard .buzz .buzz-acts button[hidden]{display:none} /* ========================================================================== ROUND 13: Photographs, three notes ========================================================================== */ /* the box for adding: its heading, then one line of help under it (they were spans, so they ran together), and one height for the row of controls */ .dropbox .lead,.dropbox .sub{display:block} .dropbox .dropctl select{height:44px; padding:0 var(--bx); border-radius:12px} .dropbox .pick.file{height:44px; font-size:15.5px} /* an event still waiting for pictures: its painting, off the card */ .albums.small .album .shot{aspect-ratio:5/4; object-position:center} .album .empty .mark{opacity:.55} /* the photograph that is its album's cover says so where the button was */ .photoview .note.is-cover{margin-top:10px} /* where the box is too narrow for one row, the controls start on the line under the words (they sat pushed against the right edge); on a phone the album takes the whole row and the two buttons the next */ @media (max-width:900px){ .dropbox .dropctl{flex:1 1 calc(100% - var(--hang)); margin-left:var(--hang)} } @media (max-width:640px){ .dropbox .dropctl select{flex:1 1 100%; min-width:0} } /* ========================================================================== ROUND 14: the home, two notes ========================================================================== */ /* "align the buttons on 'Waiting on you' with the text lines" became the rule for every button (round 15, below). The website's four buttons: the words centred. */ .site .acts.grid2 .btn{justify-content:center; text-align:center} /* ========================================================================== ROUND 15: "all buttons everywhere" — a button's EDGE on the line ========================================================================== */ /* Round 10 hung every row of boxes by its own inset, so a button's WORD sat on the line and the button stuck out to its left. The eye sees the pill, not the word ("Waiting on you", round 14), so on every button: a filled button, pill or chip starts AT the line. Two things keep their word on the line: FIELDS (the reference on Let's meet, the word in the text box), so a row that begins with a field still hangs; and a text-only button (quiet, danger), whose word is all there is of it. tools/line-audit.js measures a filled box by its edge. */ body > .wrap .acts,body > .wrap .filters,body > .wrap .views,body > .wrap .evline,body > .wrap .doors, body > .wrap .selbar,body > .wrap .album-foot,body > .wrap .actions.loose,body > .wrap .chips,body > .wrap .faces-pick, body > .wrap .who-list,body > .wrap .pillrow,body > .wrap .panel > .evticks{margin-left:calc(var(--hang) + var(--bx))} body > .wrap .views > .filters{margin-left:0} body > .wrap .opts .acts{margin-left:var(--bx)} :is(.panel,.side,.profile,.onething,.entry,.glance,.stand,.update,.linked,.foldout) > :is(.btn,button):not(.quiet):not(.danger){margin-left:calc(var(--hang) + var(--bx))} .moodcard .buzz .buzz-acts{margin-left:calc(var(--hang) + var(--bx))} .post-row > .pick.file:first-child{margin-left:0} .post .state{padding-left:var(--ln)} .acts > .note:first-child{padding-left:0} /* a row that starts with a text-only button or a field: that one keeps its word on the line */ :is(.acts,.selbar,.album-foot,.actions.loose) > :is(.quiet,.danger):first-child, :is(.acts,.selbar,.album-foot,.actions.loose) > form:first-child > :is(.quiet,.danger), .acts > :is(select,input,textarea):first-child{margin-left:calc(-1 * var(--bx))} /* in a stacked form the boxes stood at the fields' edge; its buttons move onto the line */ form.stack > div:not(.acts) > :is(button,.btn):not(.quiet):not(.danger):first-child, form.stack > :is(button,.btn):not(.quiet):not(.danger), form.stack div:not(.acts) > :is(.pick.file,.evticks),form.stack .seg2{margin-left:var(--bx)} /* a row that begins with a field: the row on the line, the field alone hangs, so whatever wraps under it (a button, on a phone) starts on the line too */ body > .wrap .search,body > .wrap .captionline,body > .wrap .withmore, body > .wrap .timepick:has(> input[name=hashtags]){margin-left:calc(var(--hang) + var(--bx))} :is(.search,.captionline,.withmore,.timepick) > :is(input,select,textarea):first-child{margin-left:calc(-1 * var(--bx))} .timepick:not(:has(> input[name=hashtags])) > :first-child{margin-left:0} /* Let's meet's day and time: two fields, the whole row hangs */ /* the post box's audience pill ("for Everyone in the house") is a button on its own line */ .composer .row .picker,.post-row .picker{margin-left:0} /* narrower screens, where rows wrap: the same, case by case (they hung in round 10) */ @media (max-width:900px){ .acts > .note:not(:first-child){padding-left:0} /* a note under its buttons */ .dropbox .dropctl{flex:1 1 100%; margin-left:0} .dropbox .dropctl > select:first-child{margin-left:calc(-1 * var(--bx))} } @media (max-width:1000px){ .addtask > button:not(.quiet){margin-left:0} } /* the stacked add row's button */ @media (max-width:640px){ .dropbox .dropctl > select:first-child{flex:1 1 calc(100% + var(--bx))} .list .row.contact .r.acts{margin-left:0} /* WhatsApp and Call under the number */ .kv dd > .evticks{margin-left:0} /* the days under their label */ } /* ========================================================================== ROUND 16: The Invitations, four notes ========================================================================== */ /* the film's words fill the panel beside it: "there's too much space on the right" — the title at the room titles' scale, the line of description at reading width instead of a narrow 36ch column */ .filmcap{gap:10px; padding-top:40px; padding-bottom:40px} .filmcap .t{font-size:clamp(30px, 3.4vw, 44px); line-height:1.08; letter-spacing:-.022em} .filmcap .s{font-size:18px; line-height:1.5; max-width:30em} .filmcap .sum:empty{display:none} /* the website as a phone shows it (tools/snap-site.mjs … phone): the whole screen, standing on the paper — in its tile, and on its own page */ .cardtile .phonebox{display:flex; align-items:center; justify-content:center; aspect-ratio:2/3; padding:18px 0; background:var(--sunk)} .cardtile .phonebox img{width:auto; height:100%; aspect-ratio:auto; object-fit:contain; border-radius:14px; background:#1C1917; box-shadow:0 1px 2px rgba(40,32,20,.12), 0 12px 26px -14px rgba(40,32,20,.5)} .piece > img.phone{border-radius:30px; box-shadow:0 1px 2px rgba(40,32,20,.12), 0 22px 44px -22px rgba(40,32,20,.55)} /* "the emojis are hiding behind the page": the reactions open below Love, and these cards clipped whatever reached past their edge. Their pictures sit inside their padding, so nothing needs clipping; the film's corners are rounded on the film itself. */ .piece,.photoview,.filmwrap{overflow:visible} .filmstage{overflow:hidden; border-radius:var(--r) 0 0 var(--r)} @media (max-width:680px){ .filmstage{border-radius:var(--r) var(--r) 0 0} } /* …and the gap between the button and its panel dropped the hover on the way to an emoji (the panel shut the moment the pointer left Love). An invisible strip of the panel now spans the gap: below it where the panel opens upward, above it where it opens downward. */ .react .panel::before{content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px} .actions.loose .react .panel::before,.acts .react .panel::before{bottom:auto; top:-10px} /* ---- the wedding website, live (liveSite, app.js §22) ------------------------ The real page at a phone's size (or a laptop's), scaled into its box; the capture behind it shows while it loads. A link laid over it opens the tile's page or the site; only on its own page can it be scrolled and touched. */ .live{position:relative; display:block; overflow:hidden; background:#1C1917 top center / cover no-repeat} .live iframe{position:absolute; left:0; top:0; border:0; display:block; background:transparent; width:calc(var(--lw) * 1px); height:calc(var(--lh) * 1px); transform-origin:0 0; transform:scale(var(--k, .3))} .live:not(.touch) iframe{pointer-events:none} .live.phone{aspect-ratio:390/844} .live.desk{aspect-ratio:16/10} .over{position:absolute; inset:0; z-index:2} .cardtile:has(> .over){position:relative} .cardtile .phonebox .live{height:100%; width:auto; border-radius:14px; box-shadow:0 1px 2px rgba(40,32,20,.12), 0 12px 26px -14px rgba(40,32,20,.5)} /* on its own page the site fills the card's width at its real size — "why don't you scale the website to the full width of the container?" — a window onto the site as it lays itself out at that width. On a touch screen a finger scrolls the page, not the site inside it (Open ↗ opens the site). */ .live.fluid{width:100%} .live.fluid iframe{width:100%; height:100%; transform:none} .piece > .live.fluid{height:min(78vh, 760px); border-radius:14px; box-shadow:0 1px 2px rgba(40,32,20,.1), 0 16px 36px -22px rgba(40,32,20,.45)} @media (hover:none){ .piece > .live.touch iframe{pointer-events:none} } .site .shot{position:relative} .site .shot .live{width:100%} .site .shot .over{left:var(--ln)} /* the capture behind a live frame while it loads: the laptop one, and on a phone the phone one where the frame shows the site's phone layout */ .live{background-image:var(--still, none)} @media (max-width:640px){ .live.fluid{background-image:var(--still-phone, var(--still, none))} } /* ========================================================================== ROUND 25: the second audit's two slips on a phone ========================================================================== */ /* the bar fits a phone for everyone: the icons and the face had no size of their own on a phone and only shrank when there was no room — a parent's page was 411px wide on a 375px phone. Explicit sizes, tighter gaps, and on the narrowest phones the clock faces go (the times stay). */ @media (max-width:420px){ .tb{gap:6px; padding:0 14px} .tb-acts{gap:0; margin-left:2px} .tb-acts .ic{width:32px; height:32px} .tb-acts .ic svg{width:19px; height:19px} .tb-acts .me{margin-left:4px} .tb-acts .me .avatar{width:28px; height:28px; font-size:11px} .tb-clocks{gap:8px; padding:3px 4px; min-width:0} } @media (max-width:360px){ .tb-clocks .lclock svg{display:none} } /* the home's columns on a phone can be as narrow as the phone: "1fr" let the widest thing in them (a long button) widen the whole page */ @media (max-width:900px){ .twocol{grid-template-columns:minmax(0,1fr)} } @media (max-width:620px){ .rail{grid-template-columns:minmax(0,1fr)} } /* "Buzz this phone when … answers" wraps on a small phone instead of widening the page (at 320px it pushed it to 348) */ @media (max-width:420px){ .moodcard .buzz .buzz-acts button{white-space:normal; height:auto; min-height:36px; padding-top:8px; padding-bottom:8px; line-height:1.25; text-align:left; border-radius:14px} } /* the narrowest phones (320px): the search box gives way to Find, and the album's long "Choose more from the full album · 385" wraps */ .search input{min-width:0} @media (max-width:420px){ .album-foot .btn{white-space:normal; height:auto; min-height:44px; padding-top:10px; padding-bottom:10px; line-height:1.25; border-radius:14px; text-align:left} } /* "Next date: 6" says what it counts: 6 days, the unit small beside the number */ .tile.num .big .unit{font-size:.34em; letter-spacing:0; margin-left:.28em; font-weight:inherit} /* ========================================================================== ROUND 26: the second audit's four design changes ("do all 4") ========================================================================== */ /* 3. contrast. The gold behind a button's white words is deeper (4.67:1; it was 3.54). The house's own gold — the mark, the eyebrows, the numbers, the website card's gold button with dark words — stays. The notes' grey is darker: 4.5:1 or more on white, on the paper and on the sunk fields. */ :root{--note:#73695D; --gold-btn:#8F6E27} button.gold,.btn.gold,button.primary,.btn.primary{background:var(--gold-btn)} button.gold:hover,.btn.gold:hover,button.primary:hover,.btn.primary:hover{background:#7C5F20} .site .btn.gold{background:var(--gold)} .site .btn.gold:hover{background:#C9993C} /* 2. the phone's Rooms tab opens this: every door this person may open */ .roomlist .row{display:flex; align-items:center; gap:14px; text-decoration:none} .roomlist .ri{width:36px; height:36px; border-radius:50%; background:var(--sunk); display:grid; place-items:center; flex:none; color:var(--body)} .roomlist .ri svg{width:19px; height:19px} .roomlist .ri .usmark{font-size:13px} .roomlist .t{font-size:17px; color:var(--title)} .roomlist .r{margin-left:auto; color:var(--note); font-size:20px} @media (max-width:360px){ .tabbar a{font-size:10px; padding-left:1px; padding-right:1px; letter-spacing:-.01em} } /* 1. the Plan on a phone: the numbers as one strip, the add form behind its button, the filters in rows that swipe — so the first task is on the first screen (the audit measured it at 1,241px down on a 375 × 812 phone) */ .addfold > summary{list-style:none; cursor:pointer} .addfold > summary::-webkit-details-marker{display:none} @media (min-width:641px){ .addfold > summary{display:none} } @media (max-width:640px){ body > .wrap > .addfold{margin:0 0 18px} body > .wrap > .addfold > summary{margin-left:var(--ln)} /* a filled button: its edge on the line */ .addfold[open] > summary{background:var(--title); color:#FFFDF9; margin-bottom:12px} /* ink: it is open */ .tiles.compact{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:18px !important} .tiles.compact .tile.num{padding:12px 6px 11px; min-height:0} .tiles.compact .tile.num .big{font-size:26px; letter-spacing:-.03em} .tiles.compact .tile.num .k{order:2; font-size:9.5px; letter-spacing:.1em; margin:5px 0 0} .tiles.compact .tile.num .cap{display:none} .tiles.compact .tile.num.tint{grid-column:1 / -1; flex-direction:row; align-items:baseline; justify-content:flex-start; gap:10px; padding:11px 16px} .tiles.compact .tile.num.tint .k{order:0; margin:0; flex:none} .tiles.compact .tile.num.tint .big{font-size:19px; flex:none} .tiles.compact .tile.num.tint .cap{display:block; margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px} .views > .filters{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:-22px; padding-right:22px} .views > .filters::-webkit-scrollbar{display:none} .views > .filters > a{flex:none} } /* 4. the Plan's add row names its fields: Task, Owner, Due date */ .addtask.labelled{align-items:flex-end} .addtask.labelled .fld{display:flex; flex-direction:column; gap:7px; min-width:0; margin:0} .addtask.labelled .fld.grow{flex:1 1 220px} .addtask.labelled .lab{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--note); font-weight:500; line-height:1.1} .addtask.labelled .fld input[type=text]{flex:none; width:100%} @media (max-width:1000px){ .addtask.labelled{align-items:stretch} .addtask.labelled .fld > :is(select,input[type=date]){margin-left:calc(-1 * var(--bx)); align-self:flex-start} /* its words under the label */ } /* the fields of the labelled row are one height, so their three names sit on one line */ .addtask.labelled .fld > :is(input,select){height:44px; box-sizing:border-box} @media (max-width:640px){ .tiles.compact .tile.num.tint .big .unit{font-size:.62em; margin-left:.22em} } /* "days" readable in the strip */ /* stacked (a narrower screen), a field's width basis would become a height */ @media (max-width:1000px){ .addtask.labelled .fld,.addtask.labelled .fld.grow{flex:none} } /* ========================================================================== ROUND 27: the product audit's first release — dependable tasks ========================================================================== */ /* a circle that is not yours to tick is drawn, not pressed */ .tick.still{cursor:default; opacity:.55} button.tick:hover{box-shadow:inset 0 0 0 1.6px var(--gold)} /* a task's state beside its owner: in progress, blocked */ :is(.meta2,.meta) .state{font-size:13px; white-space:nowrap} :is(.meta2,.meta) .state.doing{color:var(--c-teal, var(--body))} :is(.meta2,.meta) .state.blocked{color:var(--bad)} .history .row .t{font-size:15px; color:var(--ink)} .editfold{margin:0 0 22px} .tick.still:hover{box-shadow:inset 0 0 0 1.6px #D5CBBA} /* ========================================================================== ROUND 28: the product audit, 1 — a home the family shares: what you came to do (post, ask, a poll, photographs, a task), polls, a pinned post, pictures in replies ========================================================================== */ /* the choices above the composer: ink when chosen, like every chosen thing */ .compose .intents{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px} .compose .intents label{cursor:pointer; margin:0; position:relative} /* its hidden radio stays inside it, not past the page's edge */ .compose .intents input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none} .compose .intents span{display:inline-flex; align-items:center; height:34px; padding:0 var(--bx); border-radius:980px; background:var(--sunk); font-size:14.5px; font-weight:460; color:var(--body); letter-spacing:-.01em; white-space:nowrap} .compose .intents label:hover span{background:#EAE3D7; color:var(--title)} .compose .intents input:checked + span{background:var(--title); color:#FFFDF9} .compose .intents input:focus-visible + span{outline:2px solid var(--gold); outline-offset:2px} .compose .cform[hidden]{display:none} /* a poll's choices, one box each, under the question */ .compose .pollopts{display:flex; flex-direction:column; gap:8px; margin:6px 0 4px calc(60px - var(--bx))} /* a field's words under the question's */ .compose .pollopts input{font:inherit; font-size:16px; border:0; border-radius:12px; background:var(--sunk); color:var(--ink); height:44px; padding:0 var(--bx); outline:none; min-width:0} .compose .pollopts input:focus{box-shadow:inset 0 0 0 1.6px var(--gold)} .compose .pollopts [data-more-choice]{align-self:flex-start; margin-left:0} @media (max-width:640px){ .compose .intents{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:-16px; padding-right:16px} .compose .intents::-webkit-scrollbar{display:none} .compose .intents label{flex:none} .compose .pollopts{margin-left:calc(-1 * var(--bx))} } /* a poll: each choice fills with its share; yours is ringed in gold */ .poll{display:flex; flex-direction:column; gap:8px; margin:0} .post .poll{padding:14px var(--rt) 0 var(--ln)} /* a choice is a filled box: its edge on the line */ .entry .poll{padding:18px 0 4px} .poll .opt{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:46px; height:auto; padding:11px var(--bx); border-radius:12px; background:var(--sunk); color:var(--ink); font-size:16px; font-weight:440; line-height:1.35; text-align:left; white-space:normal} .poll .opt:hover:not(:disabled){background:#EDE6DA} .poll .opt[aria-pressed=true]{background:var(--sunk); color:var(--title); box-shadow:inset 0 0 0 1.6px var(--gold)} .poll .opt .fill{position:absolute; left:0; top:0; bottom:0; background:color-mix(in srgb, var(--gold) 20%, var(--sunk)); pointer-events:none} .poll .opt .lab,.poll .opt .n{position:relative} .poll .opt .lab{min-width:0; overflow-wrap:anywhere} .poll .opt .n{flex:none; color:var(--note); font-size:14px; font-variant-numeric:tabular-nums} .poll .opt:disabled{opacity:1; cursor:default} .poll .voters{font-size:13.5px; color:var(--note); margin:-3px 0 3px; line-height:1.4} .poll .pnote{font-size:13.5px; color:var(--note); margin-top:2px} /* the post the two of them pinned to everyone's home */ .post .head .pill.pinned{flex:none; font-size:12.5px; color:var(--gold); background:var(--gold-soft); border-radius:980px; padding:5px 11px; line-height:1} /* a photograph as a reply: a camera beside the box, gold once one is picked */ .replybox .rpic{flex:none; position:relative; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:980px; color:var(--note); cursor:pointer} .replybox .rpic:hover{background:var(--sunk); color:var(--title)} .replybox .rpic.has{color:var(--gold); background:var(--gold-soft)} .replybox .rpic svg{width:19px; height:19px} .replybox .rpic input{position:absolute; width:1px; height:1px; padding:0; opacity:0; pointer-events:none} .rpics{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px} .rpics img{display:block; width:auto; max-width:min(260px, 100%); max-height:220px; border-radius:12px; object-fit:cover; background:var(--sunk)} /* ========================================================================== ROUND 29: the product audit, 2 — a task or a decision out of a conversation, and a shelf of things saved for later ========================================================================== */ /* the three small actions behind a "···" */ .more-menu{position:relative; flex:none} .more-menu > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:980px; color:var(--note); font-size:17px; letter-spacing:.06em; line-height:1; user-select:none} .more-menu > summary::-webkit-details-marker{display:none} .more-menu > summary:hover,.more-menu[open] > summary{background:var(--sunk); color:var(--title)} .more-menu .pop{position:absolute; right:0; top:calc(100% + 4px); z-index:30; min-width:220px; background:var(--card); border-radius:14px; box-shadow:0 12px 40px -12px rgba(40,32,20,.35), 0 0 0 1px var(--hair); padding:6px; display:flex; flex-direction:column} .more-menu.left .pop{right:auto; left:0} .more-menu .pop a,.more-menu .pop button{display:flex; align-items:center; justify-content:flex-start; width:100%; height:auto; min-height:40px; padding:9px 12px; border-radius:10px; background:transparent; color:var(--ink); font-size:15px; font-weight:440; text-decoration:none; text-align:left; white-space:normal} .more-menu .pop a:hover,.more-menu .pop button:hover{background:var(--sunk); color:var(--title)} .more-menu .pop form{display:block; margin:0} .post .head .more-menu{margin-left:6px} .post .head .pill.pinned + .more-menu,.post .head .tx + .more-menu{margin-left:auto} .post .head .pill.pinned{margin-left:auto} /* a reply and a word under a photograph: the menu at the end of the row */ .reply{position:relative} .reply > .more-menu{margin-left:auto; align-self:flex-start} /* a message: the menu sits in the bubble's corner, shown on hover (always on a phone) */ .bubble{position:relative} .bubble > .more-menu{position:absolute; top:4px; right:-38px} .bubble.me > .more-menu{right:auto; left:-38px} .bubble > .more-menu > summary{width:30px; height:30px; opacity:0; transition:opacity .15s} .bubble:hover > .more-menu > summary,.bubble > .more-menu[open] > summary,.bubble > .more-menu > summary:focus-visible{opacity:1} @media (hover:none){ .bubble > .more-menu > summary{opacity:.7} } /* what became of it: a chip per task or decision made from this */ .made{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0} .post .made{padding:0 var(--rt) 0 var(--ln); margin-top:12px} .bubble .made,.reply .made{margin:6px 0 2px} .madechip{display:inline-flex; align-items:baseline; gap:7px; max-width:100%; padding:6px 12px; border-radius:980px; background:var(--sunk); color:var(--ink); font-size:13.5px; line-height:1.35; text-decoration:none} .madechip:hover{background:#EAE3D7; color:var(--title)} .madechip i{font-style:normal; color:var(--note); flex:none} .madechip .t{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .madechip em{font-style:normal; color:var(--gold); flex:none} .madechip.done em,.madechip.final em{color:var(--c-teal, var(--body))} .madechip.blocked em{color:var(--bad)} /* where a made thing came from, above its words */ .entry .from-src{font-size:14.5px; margin:0 0 10px} .entry .from-src a{color:var(--note); text-decoration:none} .entry .from-src a:hover{color:var(--title); text-decoration:underline} .panel.from-src .k{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--note); font-weight:500; margin:0 0 8px} .panel.from-src p{color:var(--ink); margin:0} .panel.from-src p.note{color:var(--note); margin-top:8px} /* a decision: proposed in gold, final in teal */ :is(.meta2,.meta) .state.proposed{color:var(--gold)} :is(.meta2,.meta) .state.final{color:var(--c-teal, var(--body))} .acts.minor{margin:0 0 22px} /* the audience a made thing needs: until one is chosen, the line says so in gold */ .picker.must:not(.chosen) > summary [data-label]{color:var(--gold)} /* ========================================================================== ROUND 30: the product audit, 3 — notifications that are useful: what buzzes whose phone, quiet hours, reminders, what needs you, "Got it" ========================================================================== */ .checks{display:flex; flex-direction:column; gap:14px} form.stack label.check{display:flex; align-items:flex-start; gap:12px; text-transform:none; letter-spacing:-.01em; font-size:16px; font-weight:440; color:var(--ink); margin:0; cursor:pointer; line-height:1.4} form.stack label.check input{width:18px; height:18px; margin:2px 0 0; flex:none; accent-color:var(--gold)} form.stack label.check span{display:flex; flex-direction:column; gap:2px; min-width:0} form.stack label.check b{font-weight:460; color:var(--title)} form.stack label.check em{font-style:normal; font-size:14px; color:var(--note)} .pushctl .gl-h{display:block; margin-bottom:6px} .pushctl .acts{margin-top:12px} /* an update that asks to be confirmed: who has, who has not */ .update .ackline{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:16px; padding-top:14px; border-top:1px solid var(--hair)} .update .ackline .n{font-size:15px; color:var(--ink)} .update .ackline .n b{font-weight:500; color:var(--title)} .update .ackline form{display:inline-flex} /* on the family home: the same ask, under the word from the two of them */ .confirmbar{display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; background:var(--gold-soft); border-radius:14px; padding:14px var(--rt) 14px var(--ln); margin:-8px 0 22px; color:var(--title); font-size:15.5px} .confirmbar .tx{flex:1 1 260px; min-width:0} .confirmbar a{color:inherit} .confirmbar form{display:inline-flex} /* News: what needs you, before what happened */ .list.needs .row{align-items:center} .list.needs .row .r{color:var(--gold); font-size:14px} .list.needs .row .what{flex:1; min-width:0; text-decoration:none; color:inherit; display:flex; flex-direction:column} .list.needs .row .what:hover .t{color:var(--gold)} .list.needs .row form.r{flex:none} /* a thing marked hidden stays hidden, whatever its own display says (a button is inline-flex) */ [hidden]{display:none !important} /* ========================================================================== ROUND 31: the product audit, 5 — the register as logistics: each day's numbers, the journeys and rooms, the chasing, a household answering itself ========================================================================== */ /* how many for each day: one small box per day, its name above it */ .daycounts{display:flex; flex-wrap:wrap; gap:10px 12px; margin-left:calc(-1 * var(--bx))} form.stack label.dc{display:flex; flex-direction:column; gap:6px; margin:0; padding:0; text-transform:none; letter-spacing:-.01em; font-size:14px; font-weight:460; color:var(--title)} form.stack label.dc span{padding-left:var(--bx)} form.stack label.dc input{width:88px; text-align:left} form.stack label.dc.not{opacity:.45} /* the numbers per day, as a small table of rows */ .list.counts .row{display:grid; grid-template-columns:minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap:10px; align-items:baseline} .list.counts .row.head,.list.counts .row.head .t{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--note); font-weight:500} .list.counts .row .t em,.list.counts .row .c em{display:block; font-style:normal; font-size:13px; color:var(--note)} .list.counts .row .c{font-variant-numeric:tabular-nums; color:var(--ink)} @media (max-width:640px){ .list.counts .row{grid-template-columns:minmax(0, 1fr) repeat(4, minmax(0, 52px)); gap:6px; font-size:15px} .list.counts .row.head{font-size:10px; letter-spacing:.06em} } .finals{display:flex; flex-wrap:wrap; gap:10px 12px; margin-left:calc(-1 * var(--bx))} form.stack label.fin{display:flex; flex-direction:column; gap:6px; margin:0; padding:0; text-transform:none; letter-spacing:-.01em; font-size:14px; font-weight:460; color:var(--title)} form.stack label.fin span{padding-left:var(--bx)} form.stack label.fin input{width:110px} /* the chasing: a household whose next try is today or past is marked */ .row.chase{align-items:center} .row.chase .what{flex:1; min-width:0; text-decoration:none; color:inherit; display:flex; flex-direction:column} .row.chase.due .s{color:var(--bad)} .row.chase form.r{flex:none} .kv dd.due{color:var(--bad)} /* on the family home: their own invitation */ .invitecard{display:flex; align-items:center; gap:14px; background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:18px var(--rt) 18px var(--ln); margin:0 0 22px; text-decoration:none; color:inherit} .invitecard .tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px} .invitecard .k{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:500} .invitecard b{font-weight:500; color:var(--title); font-size:18px} .invitecard em{font-style:normal; color:var(--body); font-size:15px} .invitecard .arrow{flex:none; color:var(--gold); font-size:15px} .invitecard:hover b{color:var(--gold)} /* ========================================================================== ROUND 32: the product audit, 4 — each day the place to coordinate it: its overview, what belongs to it, and the teams ========================================================================== */ .glance-ev .kv{margin:0} .glance-ev .nb{white-space:nowrap} /* the time and whether it is final stay together */ .glance-ev .tag{display:inline-block; margin-left:8px; font-size:12.5px; color:var(--gold); background:var(--gold-soft); border-radius:980px; padding:3px 10px; vertical-align:1px} .glance-ev .tag.ok{color:var(--c-teal, var(--body)); background:color-mix(in srgb, var(--c-teal, #3F7F7A) 12%, #FFFFFF)} .glance-ev .glance-part{margin-top:18px; padding-top:16px; border-top:1px solid var(--hair)} .glance-ev .glance-part .gl-h{display:block; margin-bottom:6px} .glance-ev .glance-part .list{box-shadow:none; background:transparent} .glance-ev .glance-part .list .row{padding-left:0; padding-right:0} /* a task's day, beside its owner in the Plan */ .meta2 .evtag{font-size:12.5px; color:var(--body); background:var(--sunk); border-radius:980px; padding:3px 10px; white-space:nowrap} .views > .filters.dayfilter{flex:1 1 100%; margin-top:-4px} /* its own row, under the people */ /* a team: its purpose, what it pinned, its tasks — above its messages */ .teamhead{padding:14px var(--rt) 12px var(--ln); border-bottom:1px solid var(--hair); background:var(--card)} .teamhead .purpose{margin:0; color:var(--title); font-size:15.5px} .teamhead .pinned{margin:8px 0 0; color:var(--body); font-size:14.5px; white-space:pre-wrap} .teamhead .teamwork{display:flex; flex-direction:column; gap:4px; margin-top:10px} .teamhead .twork{display:flex; justify-content:space-between; gap:12px; text-decoration:none; color:var(--ink); font-size:14.5px} .teamhead .twork em{font-style:normal; color:var(--note); flex:none} .teamhead .twork.done .t{color:var(--note); text-decoration:line-through} /* ========================================================================== ROUND 33: the product audit, 6 — meetings after they are set: how long, moved, called off, what the others can make, into a calendar ========================================================================== */ .meeting.off{opacity:.72} .meeting .pill.off{background:color-mix(in srgb, var(--bad) 10%, #FFFFFF); color:var(--bad)} .meeting .foot{text-align:left} /* not the page's footer, which is centred */ .meeting .foot .mend{margin-left:auto; display:inline-flex; gap:4px; align-items:center} .meeting .who .xpick{font-style:normal; font-size:12.5px; color:var(--body); background:var(--sunk); border-radius:980px; padding:2px 8px; margin-left:4px} .meeting .mfold{margin:0; border-radius:0; box-shadow:none; border-top:1px solid var(--hair); background:transparent} .meeting > .made{padding:0 var(--rt) 12px var(--ln); margin:0} /* ========================================================================== ROUND 34: the product audit, 7 — money as commitments: what is booked, paid, scheduled and not yet scheduled; a schedule of payments; the paperwork; the split's basis beside the register ========================================================================== */ .moneyline{display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:14px; padding-top:12px; border-top:1px solid var(--hair)} .moneyline span{display:flex; flex-direction:column} .moneyline b{font-weight:500; color:var(--title); font-size:17px; font-variant-numeric:tabular-nums} .moneyline em{font-style:normal; color:var(--note); font-size:13px} .split .basis{margin:12px 0 12px} .due-row{align-items:center; justify-content:flex-start; gap:8px} .due-row > span:first-child{flex:1; min-width:0} p.note.warn{color:var(--bad)} .due-row form.r{flex:none; display:inline-flex; gap:6px; align-items:center} .due-row form.r select{font:inherit; font-size:14px; border:0; background:var(--sunk); border-radius:10px; height:36px; padding:0 10px; color:var(--ink)} .due-row.paid .t{color:var(--note)} .list .row .due.late,.list .row .r .due.late{color:var(--bad)} /* ========================================================================== ROUND 35: the product audit, 8 — Today, for everyone: now and next, where each piece stands, your part, who to call, kept for a lost signal; and the sangeet's running order for the DJ and the host ========================================================================== */ .todaycard{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; background:var(--title); color:#FFFDF9; border-radius:var(--r); padding:16px var(--rt) 16px var(--ln); margin:0 0 22px; text-decoration:none} .todaycard .k{flex:1 1 100%; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#E8D9B5; font-weight:500} .todaycard .nn{display:flex; align-items:baseline; gap:8px; min-width:0} .todaycard .nn em{font-style:normal; color:#CFC3AE; font-size:13px} .todaycard .nn b{font-weight:500; font-size:17px} .todaycard .nn i{font-style:normal; color:#E8D9B5; font-size:14px} .todaycard .arrow{margin-left:auto; color:#E8D9B5; font-size:14.5px} .fresh{color:var(--note)} .offline{display:block; color:var(--bad); margin-top:6px} .nownext{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px 28px} .nownext .gl-h{display:block} .nownext b{display:block; font-weight:500; color:var(--title); font-size:18px; margin-top:4px} .nownext em{font-style:normal; color:var(--note); font-size:14px} .todaylist{padding-top:6px; padding-bottom:6px} .slot.today .sbody{flex:1; min-width:0} .slot.today .st{margin-top:6px; font-size:14px; color:var(--body)} .slot.today .st em{font-style:normal; color:var(--note); margin-left:8px} .slot.today .st.started{color:var(--c-teal, var(--body))} .slot.today .st.delayed{color:var(--bad)} .slot.today .st.ready{color:var(--gold)} .slot.today.delayed .what{color:var(--bad)} .stateform,.ownerform{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px} .stateform input[name=note]{font:inherit; font-size:14px; border:0; background:var(--sunk); border-radius:10px; height:36px; padding:0 12px; width:120px; color:var(--ink)} .ownerform select{font:inherit; font-size:14px; border:0; background:var(--sunk); border-radius:10px; height:36px; padding:0 10px; color:var(--ink); max-width:100%} /* the sheet for the DJ and the host */ .cuesheet{width:100%; border-collapse:collapse; background:var(--card); border-radius:var(--r); box-shadow:var(--lift); overflow:hidden; font-size:15px} .cuesheet th{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--note); font-weight:500; text-align:left; padding:14px 12px 10px} .cuesheet td{border-top:1px solid var(--hair); padding:12px; vertical-align:top; color:var(--ink)} .cuesheet th:first-child,.cuesheet td:first-child{padding-left:var(--ln)} .cuesheet td b{font-weight:500; color:var(--title)} @media (max-width:640px){ .cuesheet{font-size:13.5px} .cuesheet th,.cuesheet td{padding:10px 6px} .cuesheet th:first-child,.cuesheet td:first-child{padding-left:var(--ln)} } @media print{ .topbar,.tabbar,.foot,.back,.tone,.noprint,.egrid{display:none !important} body{padding:0; background:#fff} html{background:#fff} .cuesheet{box-shadow:none; font-size:12px} .cuesheet td,.cuesheet th{border-top:1px solid #999; color:#000} } .sheetstart{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding-left:var(--ln)} .sheetstart input[type=time]{font:inherit; font-size:15px; border:0; background:var(--sunk); border-radius:10px; height:36px; padding:0 10px; color:var(--ink)} .slot.today{align-items:flex-start} .slot.today .when{padding-top:2px} .sheetwrap{overflow-x:auto; border-radius:var(--r)} .sheetwrap .cuesheet{min-width:560px} @media print{ .sheetwrap{overflow:visible} .sheetwrap .cuesheet{min-width:0} } /* ========================================================================== ROUND 36: the product audit, 7 — contributing and recovering from mistakes: an upload says how far it has got and can be tried again, drafts are kept, and anything taken out can be put back ========================================================================== */ .upbar{display:flex; flex-direction:column; gap:6px; margin-top:12px; flex:1 1 100%} .upbar .track{display:block; height:6px; border-radius:980px; background:var(--sunk); overflow:hidden} .upbar .track i{display:block; height:100%; width:0; background:var(--gold); border-radius:inherit; transition:width .2s} .upbar .say{font-size:14px; color:var(--note); display:flex; align-items:center; gap:10px; flex-wrap:wrap} .upbar.failed .say{color:var(--bad)} .upbar.failed .track i{background:var(--bad)} .filed{display:flex; align-items:center; gap:12px; flex-wrap:wrap} .filed form.undo{margin-left:auto} textarea.drafted,input.drafted{box-shadow:inset 0 0 0 1.6px color-mix(in srgb, var(--gold) 55%, transparent)} /* ========================================================================== ROUND 37: the product audit, 5 — who of a household comes to which day ========================================================================== */ .whowrap{margin-left:0} /* in a stacked form its box already hangs by --bx */ .whogrid{border-collapse:collapse; font-size:15px; min-width:0} .whogrid th{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--note); font-weight:500; text-align:center; padding:0 10px 8px} .whogrid th:first-child,.whogrid td:first-child{text-align:left; padding-left:var(--bx); color:var(--ink); white-space:nowrap} .whogrid td{border-top:1px solid var(--hair); padding:8px 10px; text-align:center; vertical-align:middle} .tickcell i{vertical-align:middle} .tickcell{display:inline-flex; cursor:pointer; margin:0; padding:0} .tickcell input{position:absolute; opacity:0; width:1px; height:1px} .tickcell i{width:22px; height:22px; border-radius:7px; box-shadow:inset 0 0 0 1.6px #D5CBBA; display:inline-block} .tickcell input:checked + i{background:var(--gold); box-shadow:none} .tickcell input:checked + i::after{content:"✓"; color:#FFFDF9; font-size:14px; display:block; text-align:center; line-height:22px; font-style:normal} .tickcell input:focus-visible + i{outline:2px solid var(--gold); outline-offset:2px} .bynames{display:flex; flex-direction:column; gap:3px; margin-top:8px; font-size:14.5px; color:var(--body)} .bynames b{font-weight:500; color:var(--title)} /* ========================================================================== ROUND 38: the product audit, 7 — chat: a reply quotes what it answers, pins at the top of a conversation, a message linked to a day or a task ========================================================================== */ .bubble .quote{display:flex; flex-direction:column; gap:1px; margin:2px 0 6px; padding:6px 10px; border-radius:10px; background:rgba(28,25,23,.05); border-left:3px solid var(--gold); text-decoration:none; color:var(--body); font-size:13.5px; line-height:1.35} .bubble .quote b{font-weight:500; color:var(--title); font-size:12.5px} .bubble .mlink{display:flex; align-items:baseline; gap:7px; margin:6px 0 2px; padding:6px 10px; border-radius:10px; background:var(--card); text-decoration:none; color:var(--ink); font-size:14px} .bubble.them .mlink{background:var(--paper)} .bubble .mlink i{font-style:normal; color:var(--note); font-size:12.5px; flex:none} .bubble .mlink em{font-style:normal; color:var(--gold); font-size:12.5px; flex:none} .bubble.pinned{box-shadow:var(--lift), inset 0 0 0 1.4px color-mix(in srgb, var(--gold) 45%, transparent)} .bubble .pinmark{color:var(--gold)} .pinstrip{display:flex; flex-direction:column; gap:2px; padding:10px var(--rt) 10px var(--ln); border-bottom:1px solid var(--hair); background:var(--card)} .pinstrip a{display:flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--ink); font-size:14px; min-width:0} .pinstrip i{font-style:normal; color:var(--gold); font-size:12px; flex:none} .pinstrip b{font-weight:500; color:var(--title); flex:none} .pinstrip span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .say .replying{display:flex; align-items:center; gap:8px; padding:6px 0 8px; font-size:14px; color:var(--body)} .say .replying .tx{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-left:3px solid var(--gold); padding-left:10px} .say .linkpick{margin-top:8px} .say .linkpick select{font:inherit; font-size:14px; border:0; background:var(--sunk); border-radius:10px; height:36px; padding:0 10px 0 var(--bx); color:var(--body); max-width:100%} .more-menu .pop button[data-reply-to]{display:flex} /* ========================================================================== ROUND 39: the product audit, 8 — photographs: who is in them, your own favourites, asking everyone for their pictures of a day, and downloads that follow the album ========================================================================== */ .inpic{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 4px} .inpic .ptag{display:inline-flex; align-items:center} .inpic .ptag .btn{padding-left:6px} /* the face leads, as in "Send it to" */ .inpic .ptag .btn:not(:has(.avatar)){padding-left:var(--bx)} .inpic .ptag form{display:inline-flex} .inpic .ptag .x{height:36px; min-width:30px; padding:0 8px; font-size:17px; color:var(--note)} .inpic .tagadd{flex:1 1 100%; margin:2px 0 0} .actions .act.is-fav,.actions .act.is-fav svg{color:var(--gold)} .askpanel{margin-bottom:22px} .askpanel .k{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--note); font-weight:500; margin:0 0 8px} .askpanel .what{font-size:19px; color:var(--title); line-height:1.35; margin:0 0 6px} .askpanel form{margin-top:10px} .whofilter{margin:0 0 18px} .album-foot .btn svg{width:18px; height:18px} .askpanel form > button.quiet{margin-left:calc(-1 * var(--bx))} /* a quiet button by its words */ /* ========================================================================== ROUND 40: the product audit, 9 — after the wedding: albums chosen from the others, wishes (and the wish link for guests), thank-yous, what is still owed, and everything to keep as one download ========================================================================== */ .pickinto{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap} .pickinto select{font:inherit; font-size:14px; border:0; background:var(--sunk); border-radius:10px; height:36px; padding:0 10px 0 var(--bx); color:var(--body); max-width:220px} .inpic.alsoin{margin-top:14px} .inpic.alsoin form.pickinto{flex:0 1 auto} .wishbox .acts{display:flex; gap:10px; align-items:center; flex-wrap:wrap} .wishes{display:flex; flex-direction:column; gap:14px; margin-bottom:8px} .wish{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding:20px 24px} .wish .who{display:flex; align-items:center; gap:10px; margin-bottom:10px} .wish .who span{display:flex; flex-direction:column; min-width:0} .wish .who b{font-weight:500; color:var(--title)} .wish .who em{font-style:normal; color:var(--note); font-size:14px} .wish .words{white-space:pre-line; font-size:17px; line-height:1.5; color:var(--ink); max-width:68ch} .wish img{display:block; max-width:100%; max-height:420px; border-radius:12px; margin-top:12px} .wish .acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px} .wishlink{margin-top:18px} .wishlink .k,.keepall .k{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--note); font-weight:500; margin:0 0 8px} .wishlink p{color:var(--body); max-width:68ch; margin:0 0 12px} .copyline{display:flex; gap:8px; align-items:center; margin-bottom:10px} .copyline input{flex:1 1 0; min-width:0; font:inherit; font-size:15px; border:0; background:var(--sunk); border-radius:10px; padding:0 var(--bx); height:40px; color:var(--body); outline:none} .thxglance{display:flex; align-items:center; gap:18px; text-decoration:none; color:inherit} .thxglance .big{font-size:40px; line-height:1; letter-spacing:-.03em; color:var(--title); font-weight:400; white-space:nowrap} .thxglance .big i{font-style:normal; font-size:16px; color:var(--note); margin-left:6px; letter-spacing:0} .thxglance .tx{display:flex; flex-direction:column; gap:3px; min-width:0} .thxglance .tx b{font-weight:460; color:var(--title)} .thxglance .tx em{font-style:normal; color:var(--note); font-size:14.5px} .keepall p{color:var(--body); max-width:68ch; margin:0 0 14px} .keepall .btn svg{width:18px; height:18px} .thxlist{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); overflow:hidden} .thx{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 24px; border-top:1px solid var(--hair); scroll-margin-top:90px} .thx:first-child{border-top:0} .thx .who{flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:2px} .thx .who b{font-weight:460; color:var(--title); font-size:16.5px} .thx .who em{font-style:normal; color:var(--note); font-size:14.5px} .thx .who .linky{font-size:14px; align-self:flex-start} .thxform{display:flex; gap:8px; align-items:center; flex:1 1 360px; min-width:0} .thxform input[type=text]{flex:1 1 0; min-width:0; font:inherit; font-size:15px; border:0; background:var(--sunk); border-radius:10px; padding:0 var(--bx); height:38px; color:var(--ink); outline:none} .thxform select{font:inherit; font-size:14.5px; border:0; background:var(--sunk); border-radius:10px; height:38px; padding:0 10px 0 var(--bx); color:var(--body)} .thxform input:focus,.thxform select:focus,.copyline input:focus{box-shadow:inset 0 0 0 1.5px var(--gold)} form.stack.wishdoor{max-width:560px; margin:8px auto 0} form.stack.wishdoor h2{font-size:22px; letter-spacing:-.022em; margin:0} form.stack.wishdoor .note{margin:-8px 0 0} form.stack.wishdoor .err{color:var(--bad); font-size:15px; margin:0} .wishdoor .hp{display:none} /* for a form-filling machine only */ .panel.wishdone{max-width:560px; margin:8px auto 0} .panel.wishdone h2{font-size:22px; letter-spacing:-.022em; margin:0 0 6px} .panel.wishdone p{color:var(--body); margin:0 0 16px} @media (max-width: 700px){ .wish{padding:18px 16px} .thx{padding:14px 16px} .thxform{flex-wrap:wrap} .thxform input[type=text]{flex:1 1 100%} .thxform select{margin-left:calc(-1 * var(--bx))} /* on its own line here: by its words */ } /* on the line: a wish and a thank-you row are cards like the others; fields hang by their padding */ .wish,.thx{padding-left:var(--ln); padding-right:var(--rt); --hang:calc(-1 * var(--bx))} .thx{display:block} .thxform input[type=text]{max-width:480px} .thx .who{margin-bottom:10px} .thxform > input:first-child,.copyline > input:first-child,.inpic.alsoin form.pickinto > select:first-child{margin-left:calc(-1 * var(--bx))} .inpic.alsoin form.pickinto{flex:1 1 100%} .wishlink form > button.quiet,.wish .acts > form:first-child > button.quiet{margin-left:calc(-1 * var(--bx))} /* ========================================================================== ROUND 41: the product audit, 10 — filing you can see: where it would go, who would see it there, nothing filed until its maker says yes, and moved afterwards with "Change where it went" ========================================================================== */ .fileform fieldset{border:0; padding:0; margin:0; min-width:0; display:flex; flex-direction:column; gap:18px} .fileform fieldset[hidden]{display:none} .fileform i.sugg{font-style:normal; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-left:8px; font-weight:500} .fileform label.check input[disabled] + span{opacity:.5} .panel.suggest .k{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:500; margin:0 0 8px} .panel.suggest .what{font-size:19px; color:var(--title); line-height:1.35; margin:0 0 4px; max-width:68ch} .fchips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px} .fchips img{height:72px; width:auto; max-width:160px; border-radius:8px; object-fit:cover} .err.filerr{color:var(--bad); font-size:15px; margin:0 0 14px} .filed > a.btn{margin-left:auto} .filed form.undo + a.btn{margin-left:0} /* drafts from Claude: read, change, then keep */ .draftpanel{margin-bottom:22px} .draftpanel .what{font-size:18px; line-height:1.5; color:var(--ink); max-width:68ch; margin:0 0 12px} .draftpanel .k{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--note); font-weight:500; margin:14px 0 6px} .draftpanel ul{margin:0; padding-left:0; color:var(--body); max-width:68ch} /* the words on the line, the dots hanging */ .draftpanel li{margin:3px 0} .draftrows .drow{display:flex; flex-direction:column; gap:12px; padding:0 0 18px; border-bottom:1px solid var(--hair)} .draftrows .drow:last-of-type{border-bottom:0} .draftrows .drow > input[type=text]{width:100%} .three{display:flex; gap:16px; flex-wrap:wrap} .three > *{flex:1 1 150px} .three > :first-child{flex:2 1 220px} form.aidraft{margin:0 0 14px} body > .wrap > form.aidraft > button.quiet{margin-left:calc(var(--ln) - var(--bx))} /* on the page, not in a card */ body > .wrap > form.aidraft > button:not(.quiet){margin-left:var(--ln)} .composer .row button.quiet[formaction] + button[type=submit]{margin-left:0} /* "File it instead" sits just before Post */ /* ---- ROUND 43: other houses ------------------------------------------------ The days of another house wear their tones by name, as this house's do (the templates in lib/factory.js give each its tone); a custom day stays gold. */ [data-event="Engagement"]{--e:var(--c-plum)} [data-event="Sangeet"]{--e:var(--c-peach)} [data-event="Reception"]{--e:var(--c-teal)} [data-event="Wedding"]{--e:var(--c-rose)} [data-event="Us"]{--e:var(--c-red)} /* A house with no wash of its own (its dress) is plain paper. */ html[data-art="plain"]::before{display:none} /* A demonstration house says so, quietly, above everything (HQ_DEMO=1). */ .demobar{background:color-mix(in srgb, var(--gold) 9%, #FFFFFF); color:var(--note); font-size:13px; line-height:1.45} .demobar .wrap{padding-top:8px; padding-bottom:8px} .demobar .wrap > p{margin:0; padding-left:var(--ln)} .demobar a{color:var(--title); text-decoration:underline; text-underline-offset:2px} .login .who-list a.whoname{text-decoration:none} /* A house without faces: the names take the faces' column, so they start on the line (the empty column's gap moved them 28px in); on a phone the names already span the row under the days to go. */ .chead .ident:not(:has(.pair img)) .pair{display:none} @media (min-width:641px){ .chead .ident:not(:has(.pair img)){grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"who togo"} } /* On a phone a meeting's own controls wrap, in a row of their own from the line: in one row they ran off the card (Call it off, Ask … on WhatsApp, Remove). */ @media (max-width:640px){ .meeting .foot .mend{margin-left:0; flex-basis:100%; flex-wrap:wrap} .meeting .foot .mend > form:first-child > button,.meeting .foot .mend > a.btn:first-child{margin-left:calc(-1 * var(--bx))} } /* A profile's "here now" wrapped to the start of a phone's line with its dot first, and its words 13px in: on a phone it is a line of its own, the dot hanging to the left of the line. */ @media (max-width:640px){ .profile .p-tx .seen{display:block} .profile .p-tx .seen .sep{display:none} .profile .p-tx .seen .now::before{margin-left:-13px} } /* ========================================================================== ROUND 44: the family links — a door in front of the keys (views/doors.js familyDoor, askDoor, askedDoor, keyCard; the sign-in page that lists nobody). The door is a card like the sign-in page's (its words on the line by the ROUND 10 card list above); its fields hang by their inset like the code's. ========================================================================== */ .famdoor{background:var(--card); border-radius:var(--r); box-shadow:var(--lift); padding-top:26px; padding-bottom:26px; margin:8px auto 0; max-width:560px} .famdoor h2{font-size:22px; letter-spacing:-.022em; margin:0 0 12px} .famdoor p{color:var(--body); margin:0 0 12px} .famdoor p.lead{color:var(--title); font-size:17px; line-height:1.45} .famdoor .err{color:var(--bad); font-size:15px; margin:0 0 14px} .famdoor .note{font-size:14px; margin:0 0 8px} .famdoor .who-group{margin:4px 0 18px} .famdoor a.whoname{text-decoration:none} .famdoor .acts{margin-top:4px; margin-bottom:14px} .famdoor .acts:last-child{margin-bottom:0} .famdoor .link-line{margin-bottom:10px} .famdoor .code{display:block; margin:4px 0 18px} .famdoor .code > span{display:block; font-size:12px; letter-spacing:.11em; text-transform:uppercase; color:var(--eyebrow); font-weight:500; margin-bottom:8px} .famdoor .code input{width:100%; max-width:220px; font:inherit; font-size:26px; letter-spacing:.32em; font-variant-numeric:tabular-nums; border:0; border-radius:12px; padding:12px var(--bx); background:var(--sunk); color:var(--ink); outline:none} .famdoor .code input:focus,.famdoor .whofind:focus{box-shadow:inset 0 0 0 2px var(--gold)} .famdoor .whofind{display:block; width:calc(100% + var(--bx)); font:inherit; font-size:16px; border:0; border-radius:12px; padding:12px var(--bx); background:var(--sunk); color:var(--ink); outline:none; margin-bottom:12px; -webkit-appearance:none; appearance:none} .famdoor .who-group .note{margin-top:10px} .famdoor .note .linky{font-size:inherit} /* a link in a note is the note's size */ .famdoor .whofind::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none} form.login .code.key input{font-size:17px; letter-spacing:0; max-width:none} .hp{display:none} /* for a form-filling machine only, on every door */ .panel.famdone .note{margin:0 0 16px} .famlink{margin-bottom:18px} p.famnote{margin-bottom:14px} form.stack.famlists{margin-top:4px; margin-bottom:34px} form.stack.doorask h2{font-size:20px; margin:0} /* ========================================================================== ROUND 45: the house's own wedding website (views/site.js, lib/site.js) — the house's head without its strip, the days in their paintings, where, and one reply for a household. Its cards are the house's (.day, .panel, form.stack), so the ROUND 10 and 15 rules above keep every word on the line. ========================================================================== */ .sitepage{padding-bottom:36px} .sitepage .chead{margin-top:18px} body > .wrap > p.sitelead{font-size:19px; line-height:1.5; color:var(--title); margin:4px 0 30px; max-width:760px} body > .wrap > p.sitenote{color:var(--body); margin:0 0 16px; max-width:720px} .sdays{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:0 0 32px} .sday:hover{transform:none} /* a day here is read, not opened */ .sday .c.line{color:var(--body)} .sday .c.dress{color:var(--title)} .panel.sitevenue{margin-bottom:32px} .panel.sitevenue p{margin:6px 0 16px; color:var(--body)} .panel.sitevenue .acts{margin-bottom:0} form.stack.siteform .seg2{flex-wrap:wrap; row-gap:3px; margin-bottom:0} form.stack.siteform .seg2 + .note{margin-top:8px} form.stack.siteform .err{color:var(--bad); font-size:15px; margin:0} form.siteform[data-attend="no"] .yes-only{display:none} .panel.sitethanks{margin-bottom:32px} .panel.sitethanks h2{font-size:22px; letter-spacing:-.022em; margin:0 0 6px} .panel.sitethanks p{color:var(--body); margin:0 0 16px} .sitefoot{text-align:center; padding:30px 0 6px; color:var(--note)} .sitefoot .foot-mark{display:block; line-height:0} .sitefoot .mark.img{width:var(--mark-site-w, 72px); height:var(--mark-site-h, 34px) !important} .sitefoot p{margin:12px 0 0; font-size:15px} /* ========================================================================== ROUND 46: an album's guests' link (views/album-link.js, lib/album-link.js) — the one page a guest with no key sees (a door like the wish link's: the house's door card, then a stacked form), each photograph's own row as it goes, "from …" on a guest's picture, and the card to print for the tables. ========================================================================== */ form.stack.pourform{max-width:560px; margin:8px auto 0} form.stack.pourform h2{font-size:22px; letter-spacing:-.022em; margin:0} form.stack.pourform p.lead{color:var(--title); font-size:17px; line-height:1.45; margin:-8px 0 0} form.stack.pourform .err{color:var(--bad); font-size:15px; margin:0} form.stack > .upfiles{padding-left:var(--bx)} /* on the line, like a stacked form's hints */ .upfiles{list-style:none; margin:0; display:flex; flex-direction:column; gap:14px} .upfiles[hidden]{display:none} .upfile{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:7px; align-items:baseline} .upfile .nm{font-size:15px; color:var(--title); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .upfile .say{font-size:14px; color:var(--note); display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; justify-self:end; text-align:right} .upfile .track{grid-column:1 / -1; display:block; height:6px; border-radius:980px; background:var(--sunk); overflow:hidden} .upfile .track i{display:block; height:100%; width:0; background:var(--gold); border-radius:inherit; transition:width .2s} .upfile[data-state="done"] .say{color:var(--title)} .upfile[data-state="failed"] .say{color:var(--bad); grid-column:1 / -1; justify-self:start; text-align:left} /* why not, on a line of its own */ .upfile[data-state="failed"] .track i{background:var(--bad)} .upfile.more{display:block; font-size:14px; color:var(--note)} .panel.pourdone{max-width:560px; margin:8px auto 0} .panel.pourdone h2{font-size:22px; letter-spacing:-.022em; margin:0 0 6px} .panel.pourdone p{color:var(--body); margin:0 0 16px} .panel.pourdone .acts{margin-bottom:0} .panel.pourdone p:last-child{margin-bottom:0} /* a guest's picture says whose it is, where the hearts do on the other side */ .photos .from{position:absolute; left:9px; bottom:8px; max-width:calc(100% - 64px); font-size:13px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .guestlink .acts form{display:inline-flex} /* The card (pourCard): A5, every size a share of its own width (cqi), so the preview on any screen is the page in the hand. 1cqi is 1.48mm on paper. Every word starts on one line; the QR code's white margin hangs into the card's own, so its black begins on that line too. */ body > .wrap.cardwrap{padding-top:24px; padding-bottom:48px} body > .wrap.cardwrap > .cardacts{margin-bottom:18px; align-items:center} .pcardbox{container-type:inline-size; width:min(148mm, 100%); margin:0 auto} .pcard{display:flex; flex-direction:column; align-items:flex-start; aspect-ratio:148 / 210; box-sizing:border-box; padding:10.8cqi 9.46cqi 9.46cqi; background:var(--card); border-radius:var(--r); box-shadow:var(--lift); overflow:hidden} .pcard .pmark{line-height:0} .pcard .pmark .mark.img{height:7.6cqi !important} .pcard .pwho{margin:3.4cqi 0 0; font-size:2.15cqi; letter-spacing:.14em; text-transform:uppercase; color:var(--note); font-weight:500} .pcard h1{margin:1.35cqi 0 0; font-size:7.15cqi; line-height:1.1; letter-spacing:-.02em; color:var(--title); font-weight:500} .pcard .pqr{margin-top:5.4cqi; line-height:0} .pcard .pqr svg{width:58cqi; height:auto; margin-left:calc(-58cqi * var(--qz))} .pcard .plead{margin:4.7cqi 0 0; font-size:3.57cqi; line-height:1.35; color:var(--title)} .pcard .purl{margin:3.4cqi 0 0; max-width:100%; font-size:4.3cqi; line-height:1.25; letter-spacing:.005em; color:var(--title); overflow-wrap:anywhere} /* the address large, to type */ @media print{ html:has(.cardwrap)::before,html:has(.cardwrap) .demobar,.cardwrap .cardacts{display:none !important} html:has(.cardwrap),html:has(.cardwrap) body{background:#fff; padding:0; margin:0} body > .wrap.cardwrap{padding:0; margin:0; max-width:none; width:148mm} .pcardbox{width:148mm; margin:0} .pcard{width:148mm; height:210mm; aspect-ratio:auto; border-radius:0; box-shadow:none; break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact} } /* ========================================================================== ROUND 50: the pulse (/pulse, views/rooms.js pulseRoom) — a row for each kind of thing counted, its last fourteen days as bars, today on the right. On a phone the bars go under the words, on the text's line. ========================================================================== */ .list .row.pulse .r{flex:none; line-height:0} .spark{display:block; color:var(--gold); overflow:visible} .spark rect{fill:currentColor} .spark rect.nil{opacity:.3} @media (max-width:640px){ .list .row.pulse{flex-direction:column; align-items:flex-start; gap:12px} .list .row.pulse .r{margin-left:0} } /* ========================================================================== P7: THE HOUSE'S DRESS (lib/wedding.js dress(), views/layout.js dressStyle). A house's mark, wash, faces and icons are its own, set in its identity (the first house's in seed/house.json). Until a house's cards are made, its mark is their two initials in the house's gold, a hairline between them, and the foot of every page says it is for now. ========================================================================== */ .mark.letters{display:inline-flex; align-items:center; gap:.34em; flex:none; vertical-align:middle; color:var(--gold); font-family:var(--display); font-size:18px; line-height:1; letter-spacing:.02em; white-space:nowrap} .mark.letters b{font-weight:400} .mark.letters i{display:block; width:1px; height:.8em; background:currentColor; opacity:.45} .brand .mark.letters{font-size:19px; margin-right:8px; transform:translateY(-1px)} .foot .foot-mark .mark.letters{font-size:30px} .topcard .cover .cover-mark .mark.letters{font-size:34px} /* the cover's mark box sits 30px in; initials are words, so they start on the line (P8's audit of the family door) */ .topcard .cover .cover-mark .mark.letters{margin-left:calc(var(--ln) - 30px)} .sitefoot .mark.letters{font-size:28px} .pcard .pmark .mark.letters{font-size:6.2cqi} .album .empty .mark.letters{font-size:24px} .f-until{margin:-4px 0 12px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--note)} @media (max-width:900px){ .brand .mark.letters{font-size:17px} } /* Settings › The wedding, in a house of its own: what the house is wearing */ .dressmark{display:inline-block; vertical-align:-4px; margin:0 2px} .dressmark .mark.img{height:22px !important; width:auto} .dressdays .dd{white-space:nowrap; text-decoration:underline; text-decoration-color:var(--e, var(--gold)); text-decoration-thickness:2px; text-underline-offset:4px} /* the tone under the word, never before it, and the commas with the day before: every word starts on the line */